CSS Preprocessors

SCSS and LESS are two CSS preprocessors that are popular today. Learn what a CSS preprocessor is, and why you might want to use them.

Transcript

1. July 19, 2012
   CSS Preprocessors
   for great justice
   

   View Slide

2. Preprocessing? WTF?
   ✤ CSS is a language with many flaws
   ✤ No variables
   ✤ No math
   ✤ No functions
   ✤ Limited scoping/inheritance
   ✤ Lots of repetition
   CSS
   IS
   AWESOME
   

   View Slide

3. Enter Sass
   ✤ Created in 2007, written in Ruby
   ✤ “Syntactically Awesome StyleSheets”
   ✤ Goal: write your stylesheets in Sass,
   compile them to real CSS
   {style with attitude}
   $blue: #3bbfce
   $margin: 16px
   .content-navigation
   border-color: $blue
   color: darken($blue, 9%)
   .border
   padding: $margin / 2
   margin: $margin / 2
   border-color: $blue
   .content-navigation {
   border-color: #3bbfce;
   color: #2b9eab;
   }
   .border {
   padding: 8px;
   margin: 8px;
   border-color: #3bbfce;
   }
   

   View Slide

4. Response:
   AWESOM--
   Wait, you mean I have to
   REWRITE ALL MY STYLESHEETS?
   Damn. That’s not gonna happen.
   

   View Slide

5. Next contender: LESS
   “It’s like Sass, except compatible with CSS.” YAY!
   “But we’re going to make just enough
   changes so that it’s incompatible with Sass.”
   BOO!
   But people cared more about their own stylesheets than a
   preprocessing language that almost no one was using.
   So LESS started getting popular...
   Created in 2009, borrowed heavily from Sass
   

   View Slide

6. SCSS: The Return of Sass
   ✤ 2010: Sass 3 comes out with support for
   SCSS (“Sassy CSS”)
   ✤ Superset of CSS, so that existing stylesheets were
   compatible. Designers were happy.
   {this time, it’s personal}
   $blue: #3bbfce;
   $margin: 16px;
   .content-navigation {
   border-color: $blue;
   color:
   darken($blue, 9%);
   }
   .border {
   padding: $margin / 2;
   margin: $margin / 2;
   border-color: $blue;
   .content-navigation {
   border-color: #3bbfce;
   color: #2b9eab;
   }
   .border {
   padding: 8px;
   margin: 8px;
   border-color: #3bbfce;
   }
   

   View Slide

7. LESS: The Clone Wars
   Today, LESS is implemented in Javascript, instead of Ruby
   

   View Slide

8. LESS vs SCSS
   ✤ They’re both:
   ✤ Superset of CSS
   ✤ Useful & High quality
   ✤ Well-supported
   ✤ Similar to each other
   ✤ Which you use is up to you
   So what
   do they
   freakin’
   do,
   already?
   

   View Slide

9. Variables
   Define once, use everywhere
   $blue: #3bbfce;
   $margin: 16px;
   Colors, font-size, numbers, text, you name it
   

   View Slide

10. Math
    A glaring omission in CSS
    $margin: 5px;
    $padding: 3px;
    $spacing: $margin + $padding;
    Anything that a real programming language
    can calculate, you can do.
    

    View Slide

11. Mixins
    Re-use chunks of style
    @mixin table-base {
    th {
    text-align: center;
    font-weight: bold;
    }
    td, th {padding: 2px}
    }
    @mixin left($dist) {
    float: left;
    margin-left: $dist;
    }
    #data {
    @include left(10px);
    @include table-base;
    }
    

    View Slide

12. Functions
    Colors!
    lighten(), darken(),
    grayscale(), complement(),
    invert(), opacity(), etc...
    Math!
    abs(), round(),
    ceil(), floor(), ...
    Even some boolean logic! (if)
    Other stuff? I dunno
    

    View Slide

13. Selector & property nesting
    table.hl {
    margin: 2em 0;
    td.ln {
    text-align: right;
    }
    }
    li {
    font: {
    family: serif;
    weight: bold;
    size: 1.2em;
    }
    }
    table.hl {
    margin: 2em 0;
    }
    table.hl td.ln {
    text-align: right;
    }
    li {
    font-family: serif;
    font-weight: bold;
    font-size: 1.2em;
    }
    

    View Slide

14. Code Inheritance
    .error {
    border: 1px #f00;
    background: #fdd;
    }
    .error.intrusion {
    font-size: 1.3em;
    font-weight: bold;
    }
    .badError {
    @extend .error;
    border-width: 3px;
    }
    .error, .badError {
    border: 1px #f00;
    background: #fdd;
    }
    .error.intrusion,
    .badError.intrusion {
    font-size: 1.3em;
    font-weight: bold;
    }
    .badError {
    border-width: 3px;
    }
    

    View Slide

15. Frameworks
    Compass for SCSS Bootstrap for LESS
    Design around a consistent, supported base
    of reusable components that look good
    

    View Slide

16. Nothing to lose
    All of our stylesheets are ALREADY valid SCSS/LESS
    But if we take advantage of what they have to offer...
    

    View Slide

17. Benefits
    ✤ Organization
    ✤ Readability
    ✤ Automation
    ✤ Power
    ✤ Better looking pages!
    Any questions?
    lesscss.org
    sass-lang.com
    

    View Slide