1 / 11

CSS on Steroids

and. CSS on Steroids. Dr David Stearns Autumn 2013. 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. LESS file that uses various language extensions.

mada
Download Presentation

CSS on Steroids

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. and CSS on Steroids Dr David Stearns Autumn 2013

  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. LESS file that uses various language extensions Standard CSS file that browsers can understand styles.less LESS compiler styles.css output input

  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 LESS (SASS uses $ instead of @) Compiled CSS @accent-color: #FF7F40; @shading-color: #FFB873; h1 { color: @accent-color; } footer { background-color: @shading-color; } h1 { color: #FF7F40; } footer { background-color: #FFB873; }

  6. Language Extensions Mix-Ins for sets of related properties LESS (SASS uses slightly different syntax) Compiled CSS .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); } 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; }

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

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

  9. Language Extensions Functions and Expressions LESS (SASS has Similar Functions via Compass) @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; }

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

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

More Related