CSS Preprocessors. Comparing SASS, LESS and Stylus
Upcoming SlideShare
Loading in...5

CSS Preprocessors. Comparing SASS, LESS and Stylus



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/



Total Views
Views on SlideShare
Embed Views



5 Embeds 409

https://twitter.com 356
http://www.prometod.eu 21
http://gahhahhaa.hatenablog.com 20
http://www.pearltrees.com 7
http://nikhilbhalla.com 5



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • I actually like Stylus's syntax. It's very compact because of optional : and ;, and no braces! Strict indentation makes code more readable, as there's no need to find enclosing braces. Strict indentation also makes code prettier.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

CSS Preprocessors. Comparing SASS, LESS and Stylus CSS Preprocessors. Comparing SASS, LESS and Stylus Presentation Transcript

  • CSS PreprocessorsSass, Less and StylusPatrick Arlt - @patrickarlt
  • Some BackgroundIm an Designer and Developers at Geoloqi Esri.Design, UX, HTML, CSS, JS, lots of it everyday...
  • 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.
  • 80/2080% of SASS, LESS and Stylus is the same.The 20% that is different is in advanced usage.
  • 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
  • The 80%VariablesColor TransformationMixinsNestingLoops & ConditionalsImporting
  • VariablesSASSLESSStylus$button-background: #27adec;.btn {background: $button-background;}@button-background: #27adec;.btn {background: @button-background;}button-background = #27adec.btnbackground button-background
  • Color TransformationsSASSLESSStyluslighten(@color, 10%);mix($dark-blue, $light-blue, 25%);bodycolor: #444 + #111;
  • 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);}
  • SASS Mixins@mixin border-radius ($radius: 5px) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}#main {@include border-radius(4px);}
  • Stylus Mixinsborder-radius(n)-webkit-border-radius n-moz-border-radius nborder-radius n#mainborder-radius(5px)
  • NestingYou can nest selectors in all three frameworks.#main{margin: 0 auto;.title {font-size: 4em;}a {text-decoration: none;&:hover {text-decoration: underline;}}}
  • 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}
  • 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
  • The 20%
  • SASS@extend@media@content
  • @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;}
  • @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;}
  • @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%;}}
  • @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
  • @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}}
  • 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
  • LESSMixinsNamespacesScoped VariablesClient Side Processing
  • MixinsIn LESS every class is a mixin.clearfix() {zoom: 1;&:before { content: ; display: block; }&:after { content: ; display: table; clear: both; }}#content {.clearfix();}
  • 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;}
  • 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; }
  • 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`;
  • StylusSyntaxLanguage Features@keyframesJavascript API
  • 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)
  • 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
  • @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);
  • 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
  • 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
  • Smackdown!Who Wins?
  • 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
  • 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
  • QuestionsPatrick Arlt - @patrickarlt