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

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

More Decks by David Baumgold

Other Decks in Design


  1. Preprocessing? WTF? ✤ CSS is a language with many flaws

    ✤ No variables ✤ No math ✤ No functions ✤ Limited scoping/inheritance ✤ Lots of repetition CSS IS AWESOME
  2. 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; }
  3. Response: AWESOM-- Wait, you mean I have to REWRITE ALL

    MY STYLESHEETS? Damn. That’s not gonna happen.
  4. 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
  5. 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; }
  6. 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?
  7. Math A glaring omission in CSS $margin: 5px; $padding: 3px;

    $spacing: $margin + $padding; Anything that a real programming language can calculate, you can do.
  8. 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; }
  9. Functions Colors! lighten(), darken(), grayscale(), complement(), invert(), opacity(), etc... Math!

    abs(), round(), ceil(), floor(), ... Even some boolean logic! (if) Other stuff? I dunno
  10. 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; }
  11. 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; }
  12. Frameworks Compass for SCSS Bootstrap for LESS Design around a

    consistent, supported base of reusable components that look good
  13. Nothing to lose All of our stylesheets are ALREADY valid

    SCSS/LESS But if we take advantage of what they have to offer...
  14. Benefits ✤ Organization ✤ Readability ✤ Automation ✤ Power ✤

    Better looking pages! Any questions? lesscss.org sass-lang.com