Your SlideShare is downloading. ×
  • Like
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.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,020 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,020
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
25
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!