1. CSS on Steroids Dr David Stearns Autumn 2013 and

2. What are SASS and LESS? Extensions to the CSS language to support large-scale, complex projects Tools that compile those extensions into CSS the browser can actually read

3. styles.less LESS compiler LESS compiler styles.css input output LESS file that uses various language extensions Standard CSS file that browsers can understand

4. What’s the Difference? Language extensions are nearly identical, with a few specialized features here and there SASS is built on Ruby; LESS is built on JavaScript Both require a compile operation, but LESS has support for compiling in the browser

5. Language Extensions Variables for values used in multiple places @accent-color: #FF7F40; @shading-color: #FFB873; h1 { color: @accent-color; } footer { background-color: @shading-color; } LESS ( SASS uses $ instead of @ ) h1 { color: #FF7F40; } footer { background-color: #FFB873; } Compiled CSS

6. Language Extensions Mix-Ins for sets of related properties.trans(@dur: 1s) { -webkit-transition: all @dur; -moz-transition: all @dur; -o-transition: all @dur; -ms-transition: all @dur; transition: all @dur; } nav a {.trans; }.thumbs img {.trans(0.5s); } LESS ( SASS uses slightly different syntax ) nav a { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; }.thumbs img { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } Compiled CSS

7. Language Extensions Nested Rules nav { background-color: #CCC; li { display: inline-block; } a { display: inline-block; padding: 1em; } SASS and LESS (same syntax) nav { background-color: #CCC; } nav li { display: inline-block; } nav a { display: inline-block; padding: 1em; } Compiled CSS

8. Language Extensions Rule Inheritance.headings { font-family: Arial, sans-serif; font-weight: bold; color: #0E0E0E; margin-bottom: 0.5em; } h1:extend(.headings) { font-size: 200%; } h2:extend(.headings) { font-size: 150%; } LESS ( SASS uses slightly different syntax ) h1, h2 { font-family: Arial, sans-serif; font-weight: bold; color: #0E0E0E; margin-bottom: 0.5em; } h1 { font-size: 200%; } h2 { font-size: 150%; } Compiled CSS

9. Language Extensions Functions and Expressions @text-color: #0E0E0E; @shade-color: #FFE873; h1 { color: lighten(@text-color, 10%); } footer { background-color: tint(@shade-color, 50%); } footer:hover { background-color: @shade-color; } LESS ( SASS has Similar Functions via Compass )

10. LESS Usage During development, use less.js to compile LESS files to CSS on the client: For production, use command-line compiler to make final CSS file and link to that: lessc less/styles.less > css/styles.css Install LESS using Package Manager that comes with Node.js:LESSNode.js npm install -g less

11. SASS Usage Use command-line compiler to make CSS file: sass sass/styles.scss css/styles.css Use “Watch Mode” to automatically re-compile whenever.scss file changes sass --watch sass/styles.scss:css/styles.css Install SASS using Ruby:SASSRuby sudo gem install sass