Why I <3 SASS & Compass ...and you should too

Transcript

1. Why I <3 SASS & Compass ...and you should too

   Julie Pagano @juliepagano

2. Software Engineers

3. Software Engineering Principles

4. Software Engineering Principles Don’t repeat yourself

5. Software Engineering Principles Don’t repeat yourself Make it easy to

   reuse

6. Software Engineering Principles Don’t repeat yourself Make it easy to

   reuse Don’t reinvent the wheel

7. CSS Don’t repeat yourself Make it easy to reuse Don’t

   reinvent the wheel

8. +

9. + extend CSS

10. + readable CSS

11. + reusable CSS

12. + maintainable CSS

13. + awesome CSS

14. Syntactically Awesome Stylesheets

15. CSS meta-language

16. 3 uses

17. 3 uses 1. Command-line tool

18. 3 uses 1. Command-line tool 2. Standalone Ruby module

19. 3 uses 1. Command-line tool 2. Standalone Ruby module 3.

    Plugin for any Rack-enabled framework, including Ruby on Rails*

20. 3 uses 1. Command-line tool 2. Standalone Ruby module 3.

    Plugin for any Rack-enabled framework, including Ruby on Rails* * included in the asset pipeline in Rails 3.1+

21. Variables $width: 800px; $font: 'Open Sans'; $color: #fff;

22. Mixins Reusable chunks of CSS that take arguments @mixin fn($arg1,

    $arg1) { ... } div { @include fn(1, 2); } Functions in your CSS!

23. Math Operations +        -­‐      

     *        /        % yay, arithmetic!

24. String operations Concatenation font-­‐family:  'Open  '  +  'Sans'; font-­‐family:  'Helvetica,

     #{$fallback}'; Interpolation

25. Conditionals @if (condition) { ... } @else if (condition) {

    ... } @else { ... }

26. Loops @for $i from 1 through 6 { ... }

    @each $item in $list { ... } @while $i > 0 { ... $i: $i - 1; }

27. Nesting nav  {      margin:  20px;   }  

    nav  ul  {      width:  100%;   }   nav  ul  li  {      float:  left;   }   nav  ul  li  a  {      padding:  1em;   }  

28. Nesting nav  {      margin:  20px;      

     ul  {          width:  100%;            li  {              float:  left;                a  {                  padding:  1em;              }          }      }   }  

29. the rule

30. Don’t go more than 4 levels deep

31. colors #ff0000;

32. lighten lighten(#ff0000, 10%)

33. darken darken(#ff0000, 20%)

34. and even more... • More useful helper functions • Inheritance

    • Output formatting • Extensions in Ruby

35. SASS-based framework

36. web’s best reusable patterns

37. Cross-browser @include inline-block; @include has-layout;

38. CSS3 -webkit- -moz- -ms- -o-

39. CSS3 @include border-radius(10px);

40. Hacks @include clearfix; @include text-replacement;

41. Sprites!

42. + make CSS feel like a real programming language <3