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.

1. July 19, 2012 CSS Preprocessors for great justice
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
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; }
4. Response: AWESOM-- Wait, you mean I have to REWRITE ALL MY STYLESHEETS? Damn. That’s not gonna happen.
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
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; }
7. LESS: The Clone Wars Today, LESS is implemented in Javascript, instead of Ruby
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?
9. Variables Define once, use everywhere $blue: #3bbfce; $margin: 16px; Colors, font-size, numbers, text, you name it
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.
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; }
12. Functions Colors! lighten(), darken(), grayscale(), complement(), invert(), opacity(), etc... Math! abs(), round(), ceil(), floor(), ... Even some boolean logic! (if) Other stuff? I dunno
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; }
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; }
15. Frameworks Compass for SCSS Bootstrap for LESS Design around a consistent, supported base of reusable components that look good
16. Nothing to lose All of our stylesheets are ALREADY valid SCSS/LESS But if we take advantage of what they have to offer...
17. Benefits ✤ Organization ✤ Readability ✤ Automation ✤ Power ✤ Better looking pages! Any questions? lesscss.org sass-lang.com