Preprocessing? WTF?
✤ CSS is a language with many flaws
✤ No variables
✤ No math
✤ No functions
✤ Limited scoping/inheritance
✤ Lots of repetition
CSS
IS
AWESOME
Slide 3
Slide 3 text
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;
}
Slide 4
Slide 4 text
Response:
AWESOM--
Wait, you mean I have to
REWRITE ALL MY STYLESHEETS?
Damn. That’s not gonna happen.
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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;
}
Slide 7
Slide 7 text
LESS: The Clone Wars
Today, LESS is implemented in Javascript, instead of Ruby
Slide 8
Slide 8 text
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?
Slide 9
Slide 9 text
Variables
Define once, use everywhere
$blue: #3bbfce;
$margin: 16px;
Colors, font-size, numbers, text, you name it
Slide 10
Slide 10 text
Math
A glaring omission in CSS
$margin: 5px;
$padding: 3px;
$spacing: $margin + $padding;
Anything that a real programming language
can calculate, you can do.