Successfully reported this slideshow.
Your SlideShare is downloading. ×

CSS Preprocessors. Comparing SASS, LESS and Stylus

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

CSS Preprocessors. Comparing SASS, LESS and Stylus

  1. 1. CSS Preprocessors Sass, Less and Stylus Patrick Arlt - @patrickarlt
  2. 2. Some Background I'm an Designer and Developers at Geoloqi Esri. Design, UX, HTML, CSS, JS, lots of it everyday...
  3. 3. Ok Ok, which is best? Really Short Answer SASS or Stylus Slightly Longer Answer SASS if you are using Ruby. Stylus if you using Node. LESS if you afraid of the command line.
  4. 4. 80/20 80% of SASS, LESS and Stylus is the same. The 20% that is different is in advanced usage.
  5. 5. Installing SASS LESS Stylus $ gem install sass $ sass --watch style.scss:style.css <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> $ npm install less $ lessc styles.less $ npm install stylus $ stylus css --watch
  6. 6. The 80% Variables Color Transformation Mixins Nesting Loops & Conditionals Importing
  7. 7. Variables SASS LESS Stylus $button-background: #27adec; .btn { background: $button-background; } @button-background: #27adec; .btn { background: @button-background; } button-background = #27adec .btn background button-background
  8. 8. Color Transformations SASS LESS Stylus lighten(@color, 10%); mix($dark-blue, $light-blue, 25%); body color: #444 + #111;
  9. 9. Without Params With Params LESS Mixins .bordered { border: 1px solid #000; border-top-color: #444; border-bottom-color: #444; } #main { .bordered; } .border-radius (@r) { -webkit-border-radius: @r; -moz-border-radius: @r; border-radius: @r; } #main { .border-radius(4px); }
  10. 10. SASS Mixins @mixin border-radius ($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } #main { @include border-radius(4px); }
  11. 11. Stylus Mixins border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n #main border-radius(5px)
  12. 12. Nesting You can nest selectors in all three frameworks. #main{ margin: 0 auto; .title { font-size: 4em; } a { text-decoration: none; &:hover { text-decoration: underline; } } }
  13. 13. Imports All 3 support importing from other files or libraries... @import "compass/css3"; @import "susy"; @import "animation/animate"; @import "myfile.scss"; #main { @include border-radius(5px); // from compass/css3 @include span-columns(10); // from susy @include animation(fadeIn); // from animation/animate background: $background-color; // from myfile.scss } #sidebar { @include span-columns(2 omega); // from susy }
  14. 14. More Features Conditionals like "if, "when" MATH! SASS and Stylus Loops like "for", "while", and "each" Much more depth then LESS Custom functions without the Ruby/JS API
  15. 15. The 20%
  16. 16. SASS @extend @media @content
  17. 17. @extend .button { background: $blue; color: #fff } .my-special-button { @extend .button; font-size: 2em; } .button, .my-special-button { background: $blue; color: #fff } .my-special-button { font-size: 2em; }
  18. 18. @extend Selectors // This won't be compiled #context a%extreme { color: red; font-weight: bold; font-size: 2em; } .notice { @extend %extreme; } #content a.notice { color: $red; font-weight: bold; font-size: 2em; }
  19. 19. @media Declare media queries inside selectors #content { width: 65%; margin: 0 auto; @media only screen and (max-width : 767px) { width: 90%; } } #content { width: 65%; margin: 0 auto; } @media only screen and (max-device-width : 768px) { #content { width: 90%; } }
  20. 20. @content My favorite SASS feature. Lets you pass whole style blocks into mixins. Similar to Rubys "yeild". Use it for... Media Query Helpers Retina Images IE Specific Styles CSS3 Polyfills
  21. 21. @content Example <!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> @mixin for-ie(){ html.ie &{ @content; } } #browser-warning { display:none; @include for-ie(){ display:block } }
  22. 22. Compass makes SASS even more awesome CSS3 mixins, supports almost every CSS3 feature Typography styling helpers Generates CSS sprites Produces cross browser CSS for IE6,7,8 Plugin framework via Rubygems Compass Compass Bootstrap Foundation Framework Susy - Responsive Grids Compass Animation
  23. 23. LESS Mixins Namespaces Scoped Variables Client Side Processing
  24. 24. Mixins In LESS every class is a mixin .clearfix() { zoom: 1; &:before { content: ''; display: block; } &:after { content: ''; display: table; clear: both; } } #content { .clearfix(); }
  25. 25. Namespaceing Mixins Organize your mixins into namespaces #my-framework { .button () { display: block; border: 1px solid @dark-blue; background-color: @blue; color: @light-blue; } } .a-button { #my-framework > .button; }
  26. 26. Scoped Variables Variables have scope which makes them it easy to override @text-color: #444; @background-color: #fafafa; body { color: @text-color; background: @background-color; } .inverse { @text-color: #fafafa; @background-color: #444; color: @text-color; background: @background-color; } h1 { color: @text-color + #111; }
  27. 27. Client-Side Compiling Great for static HTML sites Sites where you don't have a real server (S3) You can evaluate Javascript in your .less files Evalute Javascipt You can evalute a javascript expression as a variable @height: `document.body.clientHeight`; @width: `document.body.clientWidth`;
  28. 28. Stylus Syntax Language Features @keyframes Javascript API
  29. 29. Stylus Syntax Whitespace Based Can omit { : ; } The biggest problem I have with Stylus is with its syntax border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
  30. 30. Stylus Language Stylus feels very much like a simple programming language Ruby-like ranges [1..5], [0...5] for/in loops real operator precidence complex conditionals if/else if/else, unless/else, postfix conditionals
  31. 31. @keyframe Support CSS3 keyframes are awesome, Stylus makes then easy This is awesome! @keyframes pulse 0%, 100% -webkit-transform translateX(0); 20%, 60% -webkit-transform translateX(-10px); 40%, 80% -webkit-transform translateX(10px);
  32. 32. Javascript API You could do a whole talk on the Stylus API, here are some ideas... Declare really custom functions Use Node modules like canvas Do Compass-like sprite generation Create your own CSS framework
  33. 33. Nib CSS3 helpers - gradiants, border-radius, ect... Mixins for common css patterns Extends CSS with new properties and values #feedback fixed: bottom right #logo image: '/img/logo.png' h1 overflow: ellipsis
  34. 34. Smackdown! Who Wins?
  35. 35. LESS Looses LESS just doesn't have the features or power of SASS or Stylus Nothing like Compass or Nib No plugin system Can't define your own functions with just LESS Doesn't output any debugging info
  36. 36. SASS vs. Stylus Both have similar features, a powerful plugin ecosystem, and lots of CSS3 helpers. SASS syntax is close to CSS Stylus is closer to a programming language If you use Ruby you will probally use SASS If you use Node you will probally use Stylus
  37. 37. Questions Patrick Arlt - @patrickarlt

×