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

B5fb0c3d8076017b0fafad67ba26b518?s=47 Julie Pagano
February 08, 2013

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

Lightning talk about why I love SASS and Compass.

B5fb0c3d8076017b0fafad67ba26b518?s=128

Julie Pagano

February 08, 2013
Tweet

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