This document discusses CSS preprocessors like Sass, LESS, and Stylus. It provides examples of features like variables, nesting, mixins, and functions. Variables allow defining colors and values that can be reused. Nesting allows writing CSS rules for child elements within parent selectors. Mixins help avoid repetitive code through reusable rulesets. Functions and operations allow performing calculations to generate values. CSS preprocessors help write CSS faster and maintain large stylesheets through abstraction and organization.

1. CSS Frameworks
Dimitar Belchugov
@belchugov

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

3. CSS Preprocessor
• SASS (SCSS)
• LESS
• Stylus

4. The sassy way

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

6. Nesting
table.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;
}

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

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

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

10. @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; }

11. LESS

12. Variables
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

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

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

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

16. The Apps
• On Mac:
– Livereload
– CodeKit

17. The Apps
• On Windows
– Web workbench
– Scout
– SimpLESS
– Web Essentials 2012

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

19. Live demo!

20. Questions

21. Thank you!

22. 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/