Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Julie Pagano
February 08, 2013

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

Lightning talk about why I love SASS and Compass.

Julie Pagano

February 08, 2013
Tweet

More Decks by Julie Pagano

Other Decks in Technology

Transcript

  1. Why I <3
    SASS & Compass
    ...and you should too
    Julie Pagano
    @juliepagano

    View full-size slide

  2. Software
    Engineers

    View full-size slide

  3. Software Engineering
    Principles

    View full-size slide

  4. Software Engineering
    Principles
    Don’t repeat yourself

    View full-size slide

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

    View full-size slide

  6. Software Engineering
    Principles
    Don’t repeat yourself
    Make it easy to reuse
    Don’t reinvent the wheel

    View full-size slide

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

    View full-size slide

  8. +
    readable CSS

    View full-size slide

  9. +
    reusable CSS

    View full-size slide

  10. +
    maintainable CSS

    View full-size slide

  11. +
    awesome CSS

    View full-size slide

  12. Syntactically
    Awesome
    Stylesheets

    View full-size slide

  13. CSS
    meta-language

    View full-size slide

  14. 3 uses
    1. Command-line tool

    View full-size slide

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

    View full-size slide

  16. 3 uses
    1. Command-line tool
    2. Standalone Ruby module
    3. Plugin for any Rack-enabled
    framework, including Ruby on
    Rails*

    View full-size slide

  17. 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+

    View full-size slide

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

    View full-size slide

  19. Mixins
    Reusable chunks of CSS
    that take arguments
    @mixin fn($arg1, $arg1) {
    ...
    }
    div { @include fn(1, 2); }
    Functions in your CSS!

    View full-size slide

  20. Math Operations
    +        -­‐        *        /        %
    yay, arithmetic!

    View full-size slide

  21. String operations
    Concatenation
    font-­‐family:  'Open  '  +  'Sans';
    font-­‐family:  'Helvetica,  #{$fallback}';
    Interpolation

    View full-size slide

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

    View full-size slide

  23. Loops
    @for $i from 1 through 6 {
    ...
    }
    @each $item in $list {
    ...
    }
    @while $i > 0 {
    ...
    $i: $i - 1;
    }

    View full-size slide

  24. Nesting
    nav  {  
       margin:  20px;  
    }  
    nav  ul  {  
       width:  100%;  
    }
     
    nav  ul  li  {  
       float:  left;  
    }
     
    nav  ul  li  a  {  
       padding:  1em;  
    }  

    View full-size slide

  25. Nesting
    nav  {  
       margin:  20px;  
     
       ul  {  
           width:  100%;  
     
           li  {  
               float:  left;  
     
               a  {  
                   padding:  1em;  
               }  
           }  
       }  
    }  

    View full-size slide

  26. Don’t go more than
    4 levels deep

    View full-size slide

  27. colors
    #ff0000;

    View full-size slide

  28. lighten
    lighten(#ff0000, 10%)

    View full-size slide

  29. darken
    darken(#ff0000, 20%)

    View full-size slide

  30. and even more...
    • More useful helper functions
    • Inheritance
    • Output formatting
    • Extensions in Ruby

    View full-size slide

  31. SASS-based
    framework

    View full-size slide

  32. web’s best
    reusable patterns

    View full-size slide

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

    View full-size slide

  34. CSS3
    -webkit-
    -moz-
    -ms-
    -o-

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide