Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass in 5

2,396 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

×