CSS preprocessor
LESS is more or look SASS-y trying
Intro
• Web Developer
• Mobile Developer
• .net magazine
• @jrcryer
Definition
CSS preprocessors extend CSS, allowing
designers and developers create dynamic, module
and re-usable CSS
So...
Benefits
• Reduces complexity
• Increase maintainability
• Frameworks
• Optimized CSS output
• Simplifies RWD implementati...
Key Features
• Variables
• Mixins
• Nesting
• Operations
• Modular
LESS
• Inspired by original SASS
• Firstly written in Ruby, converted to JavaScript
• Client side (via less.js)
• Server s...
SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installation
...
Variables
/* style.scss */
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
/* style.less */
@color: #4D9...
MIXINS
/** style.scss **/
@mixin rounded-corners ($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $rad...
Nesting
/** style.scss **/
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: ...
Operations
/** style.scss **/
$the-border: 1px;
$base-color: #111;
$red: #842210;
#header {
color: ($base-color * 3);
bord...
Modules
/** _variables.scss **/
@base-color: #111;
/** style.scss **/
@import “variables”
#header {
color: @base-color;
}
...
Responsive Pattern
modules/
header/
_base.scss
_responsive-320px-min.scss
_responsive-768px-min.scss
_responsive-1024px-mi...
CSS Frameworks
Other tools
Features Not Covered...
• GUARDED MIXINS
• NAMESPACES & SCOPE
• CONTROL DIRECTIVES
• DEBUGGING
• SOURCE MAPS
Demo Time!
Fin!
Upcoming SlideShare
Loading in...5
×

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

1,162

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

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!
  1. A particular slide catching your eye?

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

×