CSS on Steroids Dr David Stearns Autumn 2013 and

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

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

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

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

Language Extensions Mix-Ins for sets of related 1s) { -webkit-transition: -moz-transition: -o-transition: -ms-transition: transition: } 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

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

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

Language Extensions Functions and #FFE873; h1 { color: 10%); } footer { background-color: 50%); } footer:hover { } LESS ( SASS has Similar Functions via Compass )

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

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