Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

CSS Preprocessors. Comparing SASS, LESS and Stylus

22.278 visualizaciones

Publicado el

Talk given at PDX Javascript Admirers group comparing CSS preprocessors.

Original slides available at

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

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(){ &{@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