Frontend meetup, 2012.08.07.

1. HTTP://WWW.VIRTUAL-CALL-CENTER.EU/
LESS and other CSS
preprocessors
Farkas Máté
Frontend meetup #11, 2012-08-07

2. What’s wrong with CSS?
.my-module a { /*...*/ }
.my-module a:hover { /*...*/ }
.my-module strong { /*...*/ }
.my-module p.em { /*...*/ }
.my-module p.em em { /*...*/ }

3. What’s wrong with CSS?
.my-module a { /*...*/ }
.my-module a:hover { /*...*/ }
.my-module strong { /*...*/ }
.my-module p.em { /*...*/ }
.my-module p.em em { /*...*/ }
verbose,
primitive

4. What’s wrong with CSS?
.content {
border-radius: ...
-*-border-radius: ...
}
.sidebar {
border-radius: ...
-*-border-radius: ...
}

5. What’s wrong with CSS?
.content {
border-radius: ...
-*-border-radius: ...
} Must repeat
.sidebar { yourself
border-radius: ...
-*-border-radius: ...
}

6. CSS preprocessors
- LESS
- SASS
- Stylus

7. Saying
- LESS The dynamic stylesheet
language
- SASS Syntactically Awsome
CSS (Sass makes CSS fun again)
- Stylus Expressive, dynamic,
robust CSS

8. Runs on…
- LESS JavaScript (Node.js,
Rhino, FF, Chrome, Safari…)
- SASS Ruby gem
- Stylus Node.js

9. Syntax
- LESS CSS-like syntax
- SASS both CSS-like (SCSS)
and new (SASS) syntax
- Stylus new syntax (optional)

10. Syntax highlight
- LESS Komodo (tested by me)
- SASS
- Stylus Textmate bundle
(official)

11. Other possible comparisons
- Error reporting
- Speed, optimalizations
- Size of the compiled code
- Predefined classes & mixins

12. Why LESS?
- CSS-like syntax:
easy to migrate
- JavaScript:
everything is in the hand

13. Why LESS?
- CSS-like syntax:
easy to migrate
- JavaScript:
everything is in the hand
But we must compile
styles from now

14. Variables & functions
@defaultSize: 12px;
@emColor: #999;
p { font-size: @defaultSize; }
em { color: @emColor; }
quote {
font-size: @defaultSize * 1.2;
color: lighten(@emColor, 15%);
}

15. Mixins
.rounded(@radius: 5px) {
border-radius: @radius
/*...*/
}
.sidebar-box { .rounded; }
.main-box { .rounded(3em); }

16. Nested rules
.my-module {
...
a { ...
&:hover { ... }
}
strong { ... }
}

17. Questions & Links
About the presenter:
http://www.virtual-call-center.hu/
http://farkas-mate.hu/
?
Preprocessors:
http://lesscss.org/
http://sass-lang.com/
http://learnboost.github.com/stylus/