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

CSS preprocessorLESS 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 implementation

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 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

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

Variables

/* style.scss */

$color: #4D926F;

#header { color: $color;}h2 { color: $color;}

/* style.less */

@color: #4D926F;

#header { color: @color;}h2 { color: @color;}

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);}

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 } } }}

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%);}

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;}

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”;}

CSS Frameworks

Other tools

Features Not Covered...

• GUARDED MIXINS

• NAMESPACES & SCOPE

• CONTROL DIRECTIVES

• DEBUGGING

• SOURCE MAPS

Demo Time!

Fin!