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 usin...
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" h...
The 80%VariablesColor TransformationMixinsNestingLoops & ConditionalsImporting
VariablesSASSLESSStylus$button-background: #27adec;.btn {background: $button-background;}@button-background: #27adec;.btn ...
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;}#...
SASS Mixins@mixin border-radius ($radius: 5px) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: ...
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: non...
ImportsAll 3 support importing from other files or libraries...@import "compass/css3";@import "susy";@import "animation/an...
More FeaturesConditionals like "if, "when"MATH!SASS and StylusLoops like "for", "while", and "each"Much more depth then LE...
The 20%
SASS@extend@media@content
@extend.button {background: $blue;color: #fff}.my-special-button {@extend .button;font-size: 2em;}.button, .my-special-but...
@extend Selectors// This wont be compiled#context a%extreme {color: red;font-weight: bold;font-size: 2em;}.notice {@extend...
@mediaDeclare media queries inside selectors#content {width: 65%;margin: 0 auto;@media only screen and (max-width : 767px)...
@contentMy favorite SASS feature. Lets you pass whole style blocksinto mixins. Similar to Rubys "yeild". Use it for...Medi...
@content Example<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"><!...
Compassmakes SASS even more awesomeCSS3 mixins, supports almost every CSS3 featureTypography styling helpersGenerates CSS ...
LESSMixinsNamespacesScoped VariablesClient Side Processing
MixinsIn LESS every class is a mixin.clearfix() {zoom: 1;&:before { content: ; display: block; }&:after { content: ; displ...
Namespaceing MixinsOrganize your mixins into namespaces#my-framework {.button () {display: block;border: 1px solid @dark-b...
Scoped VariablesVariables have scope which makes them it easy to override@text-color: #444;@background-color: #fafafa;body...
Client-Side CompilingGreat for static HTML sitesSites where you dont have a real server (S3)You can evaluate Javascript in...
StylusSyntaxLanguage Features@keyframesJavascript API
Stylus SyntaxWhitespace BasedCan omit { : ; }The biggest problem I have with Stylus is with its syntaxborder-radius()-webk...
Stylus LanguageStylus feels very much like a simple programming languageRuby-like ranges [1..5], [0...5]for/in loopsreal o...
@keyframe SupportCSS3 keyframes are awesome, Stylus makes then easyThis is awesome!@keyframes pulse0%, 100%-webkit-transfo...
Javascript APIYou could do a whole talk on the Stylus API, here are someideas...Declare really custom functionsUse Node mo...
NibCSS3 helpers - gradiants, border-radius, ect...Mixins for common css patternsExtends CSS with new properties and values...
Smackdown!Who Wins?
LESS LoosesLESS just doesnt have the features or power of SASS orStylusNothing like Compass or NibNo plugin systemCant def...
SASS vs. StylusBoth have similar features, a powerful plugin ecosystem,and lots of CSS3 helpers.SASS syntax is close to CS...
QuestionsPatrick Arlt - @patrickarlt
CSS Preprocessors. Comparing SASS, LESS and Stylus
Upcoming SlideShare
Loading in...5
×

CSS Preprocessors. Comparing SASS, LESS and Stylus

17,258

Published on

Talk given at PDX Javascript Admirers group comparing CSS preprocessors.

Original slides available at http://patrickarlt.github.io/sass-less-stylus-slides/

Published in: Technology
2 Comments
34 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,258
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
194
Comments
2
Likes
34
Embeds 0
No embeds

No notes for slide

CSS Preprocessors. Comparing SASS, LESS and Stylus

  1. 1. CSS PreprocessorsSass, Less and StylusPatrick Arlt - @patrickarlt
  2. 2. Some BackgroundIm 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 AnswerSASS or StylusSlightly Longer AnswerSASS if you are using Ruby. Stylus if you using Node. LESS ifyou afraid of the command line.
  4. 4. 80/2080% of SASS, LESS and Stylus is the same.The 20% that is different is in advanced usage.
  5. 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. 6. The 80%VariablesColor TransformationMixinsNestingLoops & ConditionalsImporting
  7. 7. VariablesSASSLESSStylus$button-background: #27adec;.btn {background: $button-background;}@button-background: #27adec;.btn {background: @button-background;}button-background = #27adec.btnbackground button-background
  8. 8. Color TransformationsSASSLESSStyluslighten(@color, 10%);mix($dark-blue, $light-blue, 25%);bodycolor: #444 + #111;
  9. 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. 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 Mixinsborder-radius(n)-webkit-border-radius n-moz-border-radius nborder-radius n#mainborder-radius(5px)
  12. 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. 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. 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. 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 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. 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. 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. 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. 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. 23. LESSMixinsNamespacesScoped VariablesClient Side Processing
  24. 24. MixinsIn LESS every class is a mixin.clearfix() {zoom: 1;&:before { content: ; display: block; }&:after { content: ; display: table; clear: both; }}#content {.clearfix();}
  25. 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. 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. 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. 28. StylusSyntaxLanguage Features@keyframesJavascript API
  29. 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. 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. 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. 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. 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. 34. Smackdown!Who Wins?
  35. 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. 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. 37. QuestionsPatrick Arlt - @patrickarlt
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×