Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Preprocessors: LESS is more or look SASS-y trying

1,694 views

Published on

Introduction to CSS Preprocessors, exploring RWD approach and tools to help optimise developer workflow

Published in: Technology, Education
  • Be the first to comment

CSS Preprocessors: LESS is more or look SASS-y trying

  1. 1. CSS preprocessor LESS is more or look SASS-y trying
  2. 2. Intro • Web Developer • Mobile Developer • .net magazine • @jrcryer
  3. 3. Definition CSS preprocessors extend CSS, allowing designers and developers create dynamic, module and re-usable CSS
  4. 4. So...
  5. 5. Benefits • Reduces complexity • Increase maintainability • Frameworks • Optimized CSS output • Simplifies RWD implementation
  6. 6. Key Features • Variables • Mixins • Nesting • Operations • Modular
  7. 7. LESS • Inspired by original SASS • Firstly written in Ruby, converted to JavaScript • Client side (via less.js) • Server side with NodeJs <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> npm install -g less lessc styles.less
  8. 8. SASS / SCSS • Implemented in Ruby • Two Syntaxes • SASS - Indent based, similar to HAML • SCSS - CSS block • Installation gem install sass sass --watch style.scss:style.css
  9. 9. Variables /* style.scss */ $color: #4D926F; #header { color: $color; } h2 { color: $color; } /* style.less */ @color: #4D926F; #header { color: @color; } h2 { color: @color; }
  10. 10. MIXINS /** style.scss **/ @mixin rounded-corners ($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); } /** style.less **/ .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
  11. 11. Nesting /** style.scss **/ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /** style.less **/ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
  12. 12. Operations /** style.scss **/ $the-border: 1px; $base-color: #111; $red: #842210; #header { color: ($base-color * 3); border-left: $the-border; border-right: ($the-border * 2); } #footer { color: ($base-color + #003300); border-color: desaturate($red, 10%); } /** style.less **/ @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }
  13. 13. Modules /** _variables.scss **/ @base-color: #111; /** style.scss **/ @import “variables” #header { color: @base-color; } /** variables.less **/ @base-color: #111; /** style.less **/ @import-once ‘variables.less’ #header { color: @base-color; }
  14. 14. Responsive Pattern modules/ header/ _base.scss _responsive-320px-min.scss _responsive-768px-min.scss _responsive-1024px-min.scss _variables.scss _mixins.scss _responsive.scss app.scss /** app.less **/ @import “variables”; @import-once “mixins”; @import-once “modules/header/base”; @import-once “responsive”; /** _responsive.less **/ @media (min-width:320px) { @import-once “modules/header/responsive- 320px-min”; } modules/ header/ _base.less _responsive-320px-min.less _responsive-768px-min.less _responsive-1024px-min.less _variables.less _mixins.less _responsive.less app.less /** app.less **/ @import-once “_variables.less”; @import-once “_mixins.less”; @import-once “modules/header/_base.less”; @import-once “_responsive.less”; /** _responsive.less **/ @media (min-width:320px) { @import-once “modules/header/_responsive-320px- min.less”; }
  15. 15. CSS Frameworks
  16. 16. Other tools
  17. 17. Features Not Covered... • GUARDED MIXINS • NAMESPACES & SCOPE • CONTROL DIRECTIVES • DEBUGGING • SOURCE MAPS
  18. 18. Demo Time!
  19. 19. Fin!

×