Sass in 5

Sass in 5

Mario Peshev@no_fear_inc me.peshev.net

Sass für alles

● CSS3 meta lang written in Ruby, circa 2007● Completely CSS3 compatible● Data types and arithmetic ● Hampton Catlin, Nathan Weizenbaum, Chris 

Eppstein● SassScript – functions, console, extensions● Sass and Scss

Nested Syntax

Variables

Interactive Shell

Inheritance (@extend)

Reusability (@mixin) 

Params @ mixin

Conditionals

.scss N:1 .css

Sass vs Scss

● Old Sass ­>

● Scss is the new one – Sassy CSS (3.0+)

Handy Functions

● rgb/rgba● mix● hsl/hsla● lighten/darken● saturate/desaturate● opacify/transparentize

Handy Functions 2

● quote/unquote● percentage● round/ceil/floor● min/max● length/nth● join/append● Custom functions written in Ruby

Run the Sass

Compile options

scss ­­watch style.scss:style.css

compass watch [path/to/project]

Options available for compiled code formatting

GUI friends:

Thank you

Mario Peshev@no_fear_inc me.peshev.net