sass is more than less
DESCRIPTION
TRANSCRIPT
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