Sass is a CSS extension language created in 2007 that adds powerful features like variables, nested rules, mixins, selector inheritance, and functions. It has two syntax options - Sass syntax and SassCSS syntax. Sass files end in .scss and are compiled into normal .css files. Sass provides many useful functions for working with colors, lists, and strings, and also allows for custom functions to be written in Ruby. Sass can be run from the command line or with a GUI like Compass.

1. Sass in 5
Mario Peshev
me.peshev.net
@no_fear_inc

2. 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

3. Nested Syntax

4. Variables

5. Interactive Shell

6. Inheritance (@extend)

7. Reusability (@mixin)

8. Params @ mixin

9. Conditionals

10. .scss N:1 .css

11. Sass vs Scss
● Old Sass ­>
● Scss is the new one –
Sassy CSS (3.0+)

13. Handy Functions
● rgb/rgba
● mix
● hsl/hsla
● lighten/darken
● saturate/desaturate
● opacify/transparentize

14. Handy Functions 2
● quote/unquote
● percentage
● round/ceil/floor
● min/max
● length/nth
● join/append
● Custom functions written in Ruby

16. Run the Sass

17. Compile options
scss ­­watch style.scss:style.css
compass watch [path/to/project]
Options available for compiled code formatting
GUI friends:

18. Thank you
Mario Peshev
me.peshev.net
@no_fear_inc