CSS Frameworks

Dimitar Belchugov@belchugov

CSS Preprocessor

• Has anybody used CSS preprocessors?• Did you ever wished for a variable in CSS?• Do you like to write CSS faster?

CSS Preprocessor

• SASS (SCSS)• LESS• Stylus

The sassy way

Variables$blue: #3bbfce;$margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

/* CSS */

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

Nestingtable.hl { margin: 2em 0; td.ln { text-align: right; }}

li { font: { family: serif; weight: bold; size: 1.2em; }}

/* CSS */

table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}

li { font-family: serif; font-weight: bold; font-size: 1.2em;}

Mixins@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}

@mixin left($dist) { float: left; margin-left: $dist;}

#data { @include left(10px); @include table-base;}

/* CSS */

#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}

Selector Inheritance.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { @extend .error; border-width: 3px;}

/* CSS */

.error, .badError { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.3em; font-weight: bold;}

.badError { border-width: 3px;}

Arguments/* style.scss */

@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }#sidebar { @include rounded(top, left, 8px); }

/* style.css */

#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

#footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }

#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }

@import* _rounded.scss */

@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

/* style.scss */

@import "rounded";

#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }#sidebar { @include rounded(top, left, 8px); }

/* style.css */

#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

#footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }

#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }

LESS

Variables

// LESS

@color: #4D926F;

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

/* Compiled CSS */

#header { color: #4D926F;}h2 { color: #4D926F;}

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

/* Compiled CSS */

#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}

Nested Rules// LESS

#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}

/* Compiled CSS */

#header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}

Functions & Operations// 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%);}

/* Compiled CSS */

#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}

The Apps

• On Mac:– Livereload– CodeKit

The Apps

• On Windows– Web workbench– Scout– SimpLESS– Web Essentials 2012

Which CSS preprocessor language should I choose?

http://css-tricks.com/sass-vs-less/

“Winner: Used to be Sass, but LESS is more active development lately”

Chris Coyier

Live demo!

Questions

Thank you!

Referenses• http://sass-lang.com/• http://lesscss.org/• http://learnboost.github.io/stylus/• http://css-tricks.com/sass-vs-less/• http://css-tricks.com/musings-on-preprocessing/• http://livereload.com/• http://incident57.com/codekit/• http://mhs.github.io/scout-app/• http://wearekiss.com/simpless• http://thesassway.com/