Your SlideShare is downloading. ×
CSS Preprocessors. Comparing SASS, LESS and Stylus
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Preprocessors. Comparing SASS, LESS and Stylus


Published on

Talk given at PDX Javascript Admirers group comparing CSS preprocessors. …

Talk given at PDX Javascript Admirers group comparing CSS preprocessors.

Original slides available at

Published in: Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CSS PreprocessorsSass, Less and StylusPatrick Arlt - @patrickarlt
  • 2. Some BackgroundIm an Designer and Developers at Geoloqi Esri.Design, UX, HTML, CSS, JS, lots of it everyday...
  • 3. Ok Ok, which is best?Really Short AnswerSASS or StylusSlightly Longer AnswerSASS if you are using Ruby. Stylus if you using Node. LESS ifyou afraid of the command line.
  • 4. 80/2080% of SASS, LESS and Stylus is the same.The 20% that is different is in advanced usage.
  • 5. InstallingSASSLESSStylus$ 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. The 80%VariablesColor TransformationMixinsNestingLoops & ConditionalsImporting
  • 7. VariablesSASSLESSStylus$button-background: #27adec;.btn {background: $button-background;}@button-background: #27adec;.btn {background: @button-background;}button-background = #27adec.btnbackground button-background
  • 8. Color TransformationsSASSLESSStyluslighten(@color, 10%);mix($dark-blue, $light-blue, 25%);bodycolor: #444 + #111;
  • 9. Without Params With ParamsLESS 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. SASS Mixins@mixin border-radius ($radius: 5px) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}#main {@include border-radius(4px);}
  • 11. Stylus Mixinsborder-radius(n)-webkit-border-radius n-moz-border-radius nborder-radius n#mainborder-radius(5px)
  • 12. NestingYou can nest selectors in all three frameworks.#main{margin: 0 auto;.title {font-size: 4em;}a {text-decoration: none;&:hover {text-decoration: underline;}}}
  • 13. ImportsAll 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/animatebackground: $background-color; // from myfile.scss}#sidebar {@include span-columns(2 omega); // from susy}
  • 14. More FeaturesConditionals like "if, "when"MATH!SASS and StylusLoops like "for", "while", and "each"Much more depth then LESSCustom functions without the Ruby/JS API
  • 15. The 20%
  • 16. SASS@extend@media@content
  • 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. @extend Selectors// This wont 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. @mediaDeclare 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. @contentMy favorite SASS feature. Lets you pass whole style blocksinto mixins. Similar to Rubys "yeild". Use it for...Media Query HelpersRetina ImagesIE Specific StylesCSS3 Polyfills
  • 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(){ &{@content;}}#browser-warning {display:none;@include for-ie(){display:block}}
  • 22. Compassmakes SASS even more awesomeCSS3 mixins, supports almost every CSS3 featureTypography styling helpersGenerates CSS spritesProduces cross browser CSS for IE6,7,8Plugin framework via RubygemsCompassCompass BootstrapFoundation FrameworkSusy - Responsive GridsCompass Animation
  • 23. LESSMixinsNamespacesScoped VariablesClient Side Processing
  • 24. MixinsIn LESS every class is a mixin.clearfix() {zoom: 1;&:before { content: ; display: block; }&:after { content: ; display: table; clear: both; }}#content {.clearfix();}
  • 25. Namespaceing MixinsOrganize 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. Scoped VariablesVariables 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. Client-Side CompilingGreat for static HTML sitesSites where you dont have a real server (S3)You can evaluate Javascript in your .less filesEvalute JavasciptYou can evalute a javascript expression as a variable@height: `document.body.clientHeight`;@width: `document.body.clientWidth`;
  • 28. StylusSyntaxLanguage Features@keyframesJavascript API
  • 29. Stylus SyntaxWhitespace BasedCan omit { : ; }The biggest problem I have with Stylus is with its syntaxborder-radius()-webkit-border-radius arguments-moz-border-radius argumentsborder-radius argumentsbodyfont 12px Helvetica, Arial, sans-serifa.buttonborder-radius(5px)
  • 30. Stylus LanguageStylus feels very much like a simple programming languageRuby-like ranges [1..5], [0...5]for/in loopsreal operator precidencecomplex conditionals if/else if/else, unless/else, postfixconditionals
  • 31. @keyframe SupportCSS3 keyframes are awesome, Stylus makes then easyThis is awesome!@keyframes pulse0%, 100%-webkit-transform translateX(0);20%, 60%-webkit-transform translateX(-10px);40%, 80%-webkit-transform translateX(10px);
  • 32. Javascript APIYou could do a whole talk on the Stylus API, here are someideas...Declare really custom functionsUse Node modules like canvasDo Compass-like sprite generationCreate your own CSS framework
  • 33. NibCSS3 helpers - gradiants, border-radius, ect...Mixins for common css patternsExtends CSS with new properties and values#feedbackfixed: bottom right#logoimage: /img/logo.pngh1overflow: ellipsis
  • 34. Smackdown!Who Wins?
  • 35. LESS LoosesLESS just doesnt have the features or power of SASS orStylusNothing like Compass or NibNo plugin systemCant define your own functions with just LESSDoesnt output any debugging info
  • 36. SASS vs. StylusBoth have similar features, a powerful plugin ecosystem,and lots of CSS3 helpers.SASS syntax is close to CSSStylus is closer to a programming languageIf you use Ruby you will probally use SASSIf you use Node you will probally use Stylus
  • 37. QuestionsPatrick Arlt - @patrickarlt