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/
Top Related