1. CSS Pre-Processing
Itai 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

2. SASS is more than LESS
Itai 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

3. CSS Pre-Processing
Itai 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

4. 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?

5. 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)

6. 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)

8. 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! Developers who started working
with CSS preprocessor will never agree to go
back
This is it, and therefore, many of the medium/large scale projects
today use a CSS Preprocessor – Should we?

10. But we must remember
though that …

11. 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

12. 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;}

13. 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");

14. 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;}

15. 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; }

16. 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;}

17. 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;
}

18. 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;}

19. 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)

20. 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..

21. SASS or LESS?
LESS is easier to learn BUT....
SASS has conditional statements (LESS doesn't)
/* -- .scss -- */
@mixin my-mixin($parameters) {
/* Basic stuff here */
@if $direction == top {
/* Conditional stuff here */
}
}

22. SASS or LESS?
SASS has loop statements (LESS doesn't)
/* -- .scss -- */
@for $i from 1 through 10 {
/* My stuff here */
.my-element:nth-child($i) { animation-name: loading-$i; }
}

23. SASS or LESS?
SASS extends more efficient than 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 */
}

24. 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)

25. SASS or LESS?
COMPASS has a mixin called background. It's so robust, you
can pass whatever you want and it will output what you need
/* -- .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);
}

26. SASS or LESS?
One weird thing in SASS, is the way variable scope
is treated
$color: black;
.scoped {
$color: white;
color: $color;
}
.unscoped {
// LESS = black (global)
// SASS = white (overwritten by local)
color: $color;
}
Not so intuitive but acceptable

27. Stats (always nice to look at)
2012/02/03 2013/03/09
Number of open issues on 392 98
LESS
Number of open issues on 104 68
SASS 272 178
Pending pull requests on 86 6
LESS
Pending pull requests on 32 2
SASS 69 22
Number of commits in the 11 95
last two months in LESS
Number of commits in the 48 20
last two months in SASS 31 10
Number of members in > 1000
LESS network
Number of members in < 500
SASS network < 500

28. Should We Try It?

30. 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)

31. 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

32. Thank You