Your SlideShare is downloading. ×
CSS Preprocessors: LESS is more or look SASS-y trying
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,060
views

Published on

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

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

Published in: Technology, Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,060
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS preprocessor LESS is more or look SASS-y trying
  • 2. Intro • Web Developer • Mobile Developer • .net magazine • @jrcryer
  • 3. Definition CSS preprocessors extend CSS, allowing designers and developers create dynamic, module and re-usable CSS
  • 4. So...
  • 5. Benefits • Reduces complexity • Increase maintainability • Frameworks • Optimized CSS output • Simplifies RWD implementation
  • 6. Key Features • Variables • Mixins • Nesting • Operations • Modular
  • 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. 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. Variables /* style.scss */ $color: #4D926F; #header { color: $color; } h2 { color: $color; } /* style.less */ @color: #4D926F; #header { color: @color; } h2 { color: @color; }
  • 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. 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. 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. 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. 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. CSS Frameworks
  • 16. Other tools
  • 17. Features Not Covered... • GUARDED MIXINS • NAMESPACES & SCOPE • CONTROL DIRECTIVES • DEBUGGING • SOURCE MAPS
  • 18. Demo Time!
  • 19. Fin!