CSS Pre-ProcessingCSS Pre-Processing

Itai Koren, March 2013Itai Koren, March 2013

DISCLOSURE:• I've worked with LESS for two years and switched to SASS.• I've worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago

explaining why I chose SASS over LESS

SASS is more than LESSSASS is more than LESS

Itai Koren, February 2012Itai Koren, February 2012

DISCLOSURE:• I've worked with LESS for two years and switched to SASS.• I've worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago

explaining why I chose SASS over LESS

CSS Pre-ProcessingCSS Pre-Processing

Itai Koren, March 2013Itai Koren, March 2013

DISCLOSURE:• I've worked with LESS for two years and switched to SASS.• I've worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago

explaining why I chose SASS over LESS

Agenda

• What are CSS preprocessors?• Why Use a CSS Preprocessor?• What is the Catch (or Possible Issues)?• How Do CSS Preprocessors Work and

what can it do for us (basic examples)?• SASS or LESS?• Should We Try It?

What are CSS preprocessors?

• Converts code written in the preprocessed language into the same old CSS

• Not bound by the limitations of CSS because they aren’t CSS

• The preprocessed language gives much more functionality than CSS

• Popular CSS preprocessors are SASS, LESS, and Stylus (Here I’ll only refers to the first two which are the most popular)

Why Use a CSS Preprocessor?

• Not bound by the limitations of CSS because they aren’t CSS (sounds familiar?)

• Developers looks for more abstraction• We like variables, conditions and methods• It allows us to write more flexible and

maintainable CSS• Will make our CSS DRY (Don't Repeat Yourself)

as opposed to WET (Write Everything Twice)

“Simplicity means achievement of

maximum with minimum means"

-- less is definitely more! Albert Einstein

What’s the Catch (or Possible Issues)?

• All developers in the project must use the same preprocessor

• The preprocessed outputted files should not be edited directly

• Development process should include a simple preprocessing ability

• WARNINNG!

This is it, and therefore, many of the medium/large scale projects today use a CSS Preprocessor – Should we?

Developers who started workingwith CSS preprocessor will never agree to go back

“Once a new technology rolls over you, if

you're not part of the steamroller, you're

part of the road"

-- Stewart Brand, The Media La: Inventing

the Future at M.I.T

“With great power comes great

responsibility"

-- Uncle Ben to Peter Parker

(SpiderMan)

But we must remember though that …

How Do CSS Preprocessors Work?

• Developers use the preprocessor language to create their structured CSS

• The preprocessor processes the created files and outputs a CSS

• The produced CSS works as ordinary CSS

Stop bullshit and show us some code

What can it do for us (basic examples)?

Variables - changing the value of a variable once is much more maintainable than changing the many instances of it’s value spread over a CSS file

/* -- .scss -- */$color: #efefff;body {background: $color;} /* -- .less -- */@color: #efefef;body {background: @color;} /* -- resulting css -- */body {background: #efefff;}

What can it do for us (basic examples)?

Interpolation - extends variables in that you aren’t limited to the values of CSS properties

/* -- .scss -- */$side: left;border-#{$side}: 1px solid #000; /* -- resulting css -- */border-left: 1px solid #000; /* -- .less -- */@images-url: "http://example.com";background-image: url("@{images-url}/images/bg.png"); /* -- resulting css -- */background-image: url("http://myexample.com/images/bg.png");

What can it do for us (basic examples)?

Math – Operations, animations, moving towards responsive design and more

/* -- .scss -- */$navbar-width: 700px;$items: 7;#navbar li {width: $navbar-width/$items - 10px;} /* -- resulting css -- */#navbar li {width: 90px} /* -- .less -- */@base-color: #111;#header {color: @base-color * 5;} /* -- resulting css -- */#header {color: #555;}

What can it do for us (basic examples)?

Mixins - allows easy reuse of blocks of code

/* -- .scss -- */@mixin rounded-corners { $radius: 5px;  border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius;} #navbar li { @include rounded-corners; }#footer { @include rounded-corners; } 

What can it do for us (basic examples)?

Mixins - allows easy reuse of blocks of code (Continue)

/* -- .less -- */.rounded-corners { @radius: 5px;

border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;} #header {.rounded-corners;}#footer { .rounded-corners;}  

What can it do for us (basic examples)?

Mixins - allows easy reuse of blocks of code (Continue)

/* -- resulting css -- */#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #footer { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}

What can it do for us (basic examples)?

Nesting - Allow nested formatting

/* -- .scss or .less -- */#navbar { width: 70%; height: 30px;

ul { list-style: none; } li { float: right; a { text-decoration: none; } &:hover { text-decoration: underline; } }}

/* -- resulting css -- */#navbar {width: 70%; height: 30px;}#navbar ul {list-style: none;}#navbar li {float: right;}#navbar li a {text-decoration: none;}#navbar li a:hover {text-decoration: underline;}

SASS or LESS?

Here are some facts first:• LESS has a client side JavaScript

implementation, which should never be used for production (Example)

• SASS (Syntactically Awesome Stylesheets) is a rubygem (package) - Since 2006 (influenced by YAML)

• LESS (Leaner CSS) was a rubygem but converted to JavaScript (nodejs). Has also a PHP implementation (LessPHP) - since 2009 (influenced by SASS)

SASS or LESS?

• We already know that preprocessing is probably good for us :)

• It also can define a good working process with UI people

So now, Which CSS Preprocessor Is better?

Lets see..

SASS or LESS?

LESS is easier to learn BUT....

/* -- .scss -- */@mixin my-mixin($parameters) { /* Basic stuff here */

@if $direction == top { /* Conditional stuff here */

}}

SASS has conditional statements (LESS doesn't)

SASS or LESS?

/* -- .scss -- */

@for $i from 1 through 10 { /* My stuff here */

.my-element:nth-child($i) { animation-name: loading-$i; }}

SASS has loop statements (LESS doesn't)

SASS or LESS?

/* -- .less -- */.module-less_b { .module-less_a(); /* Copies everything from .module-a down here */} .module-sass_b { /* Some unique styling */ @extend .module-a;} /* -- resulting css -- */.module-less_a { /* A bunch of stuff */}.module-less_b { /* Same bunch of stuff */ /* + Some unique styling */} .module-sass_a, .module-sass_b { /* A bunch of stuff */}.module-sass_b { /* Some unique styling */}

SASS extends more efficient than LESS

SASS or LESS?

BUT the winning argument is that SASS has COMPASS, LESS doesn’t

Compass is a collection of helpful tools and "battle-tested best practices” for SASS

SASS is much more robust than LESS and this what makes Compass possible (LESS does not have a similar solution)

SASS or LESS?

/* -- .scss -- */.babam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) );} /* -- resulting css -- */.babam { background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);}

COMPASS has a mixin called background. It's so robust, you can pass whatever you want and it will output what you need

BABAM!!!!!

SASS or LESS?

$color: black; .scoped { $color: white; color: $color; } .unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color; }

One weird thing in SASS, is the way variable scope is treated

Not so intuitive but acceptable

Stats (always nice to look at)2012/02/03 2013/03/09

Number of open issues on LESS

392 98

Number of open issues on SASS

104 68

Pending pull requests on LESS

86 6

Pending pull requests on SASS

32 2

Number of commits in the last two months in LESS

11 95

Number of commits in the last two months in SASS

48 20

Number of members in LESS network

> 1000

Number of members in SASS network

< 500

272

69

31

178

22

10

< 500

Should We Try It?

So we do have a winner - SASS + COMPASS

But should we try it?????

“NO. Try not. DO... or do not. There is no

try."

-- Yoda, The Empire Strikes Back“NO.

Should We Try It?

So….• We should use both, SASS & COMPASS• We should have a solution for development

phase (file monitoring - IDEA Plugin? External? Scout? There is even a firebug extension for FF)

• We should have a solution for the build phase (probably using GRUNT to run the SASS preprocessor)

Further Resources

• http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

• http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

• http://thesassway.com/• http://thesassway.com/beginner/getting-started-with-sass-and-

compass• http://thesassway.com/advanced/pure-sass-functions• http://sass-lang.com/• http://www.manning.com/netherland/SaCiA_meap_ch01.pdf

Thank YouThank You