![Page 1: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/1.jpg)
CSS preprocessorLESS is more or look SASS-y trying
![Page 2: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/2.jpg)
Intro
• Web Developer
• Mobile Developer
• .net magazine
• @jrcryer
![Page 3: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/3.jpg)
Definition
CSS preprocessors extend CSS, allowing designers and developers create
dynamic, module and re-usable CSS
![Page 4: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/4.jpg)
So...
![Page 5: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/5.jpg)
Benefits
• Reduces complexity
• Increase maintainability
• Frameworks
• Optimized CSS output
• Simplifies RWD implementation
![Page 6: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/6.jpg)
Key Features
• Variables
• Mixins
• Nesting
• Operations
• Modular
![Page 7: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/7.jpg)
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
![Page 8: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/8.jpg)
SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installationgem install sass
sass --watch style.scss:style.css
![Page 9: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/9.jpg)
Variables
/* style.scss */
$color: #4D926F;
#header { color: $color;}h2 { color: $color;}
/* style.less */
@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
![Page 10: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/10.jpg)
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);}
![Page 11: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/11.jpg)
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 } } }}
![Page 12: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/12.jpg)
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%);}
![Page 13: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/13.jpg)
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;}
![Page 14: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/14.jpg)
Responsive Patternmodules/ header/ _base.scss _responsive-320px-min.scss _responsive-768px-min.scss _responsive-1024px-min.scss_variables.scss_mixins.scss_responsive.scssapp.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.lessapp.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”;}
![Page 15: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/15.jpg)
CSS Frameworks
![Page 16: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/16.jpg)
Other tools
![Page 17: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/17.jpg)
Features Not Covered...
• GUARDED MIXINS
• NAMESPACES & SCOPE
• CONTROL DIRECTIVES
• DEBUGGING
• SOURCE MAPS
![Page 18: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/18.jpg)
Demo Time!
![Page 19: CSS Preprocessors: LESS is more or look SASS-y trying](https://reader035.vdocument.in/reader035/viewer/2022081414/54c79f154a7959b5408b4577/html5/thumbnails/19.jpg)
Fin!