Sassy Tools – Toolkit – Grids Frameworks

View Github Repository Open presentation in a new window

eroepken

See all presentation from eroepken

Sassy Tools – Toolkit – Grids Frameworks

1 0

sasstronauts-unite

Learn how to be Sassy. :D

On Github eroepken / sasstronauts-unite

"Sass is the most mature, stable, and powerful professional grade CSS extension language in the world."

Command Line

Installation

sudo gem install sass

Compilation

Simple

sass style.scss:someotherfile.css

Complex

sass --watch style.scss:someotherfile.css --style=[nested|expanded|compact|compressed] sass app/scss:public/css

Conversion

sass-convert style.scss style.sass

Syntax

Importing

@import 'file', 'another-file';

Nesting

Sass

CSS

Nested Properties

Sass

CSS

Parent Selector (&)

Sass

CSS

Commenting

// Single-line comments

/* Multi-line comments */

Variables

Mixins

@include clearfix;

Extending

Sass

CSS

Placeholder Selector (%)

Sass

CSS

At Root Elements

Sass

CSS

At Root Elements (With/Without)

Sass

CSS

Sassy Tools

A Unix like toolset.

"The Unix philosophy emphasizes building short, simple, clear, modular, and extensible code that can be easily maintained and repurposed by developers other than its creators."

Sass loves Unix!

Tools without assumptions.

"CSS Authoring Framework"

Features

Vendor Prefixes

CSS3

Border Radius

Box Shadows

Gradients

Transform

Transition

to name a few ...

Vertical Rhythm

Modular Scale

github.com/Team-Sass/modular-scale

Toolkit

Helper mixins and functions.

Clearfix

Intrinsic Ratios

Parallax

Triangles

to name a few ...

Breakpoint

breakpoint-sass.com

Grids Frameworks

susy.oddbird.net

Singularity

singularity.gs

0