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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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)