CSS Preprocessors. Comparing SASS, LESS and Stylus

Uploaded 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 http://patrickarlt.github.io/sass-less-stylus-slides/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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(){html.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