Successfully reported this slideshow.

Sass in 5

2,279 views

Published on

Sass lightning talk at OpenFest 2012

Published in: Technology
  • Be the first to comment

Sass in 5

  1. 1. Sass in 5Mario Peshev me.peshev.net@no_fear_inc
  2. 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. 3. Nested Syntax
  4. 4. Variables
  5. 5. Interactive Shell
  6. 6. Inheritance (@extend)
  7. 7. Reusability (@mixin) 
  8. 8. Params @ mixin
  9. 9. Conditionals
  10. 10. .scss N:1 .css
  11. 11. Sass vs Scss● Old Sass ­>● Scss is the new one –  Sassy CSS (3.0+)
  12. 12. Handy Functions● rgb/rgba● mix● hsl/hsla● lighten/darken● saturate/desaturate● opacify/transparentize
  13. 13. Handy Functions 2● quote/unquote● percentage● round/ceil/floor● min/max● length/nth● join/append● Custom functions written in Ruby
  14. 14. Run the Sass
  15. 15. Compile optionsscss ­­watch style.scss:style.csscompass watch [path/to/project]Options available for compiled code formattingGUI friends:
  16. 16. Thank youMario Peshev me.peshev.net@no_fear_inc

×