$30 off During Our Annual Pro Sale. View Details »

CSS Preprocessors

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.

David Baumgold

July 19, 2012
Tweet

More Decks by David Baumgold

Other Decks in Design

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