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

Lightning talk about why I love SASS and Compass.

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