CSS előfeldolgozók: amire frontendesként mindig is vágytál (LESS, SASS, Stylus) Web konferencia, 2012. október 20.

1. CSS előfeldolgozók
– amire
frontendesként
mindig is vágytál
Farkas Máté
Web konferencia, 2012. október 20.

2. Why we need this?
.alert {
color: #f36;
font-size: 1.4em;
}
.important {
color: #f36;
font-size: 1.1em;
}

3. CSS needs a hero. /Stylus/
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
-o-transition: color 1s ease;
transition: color 1s ease;

4. Write less, do more. /jQuery/
.my-module a { /*...*/ }
.my-module a:hover { /*...*/ }
.my-module strong { /*...*/ }
.my-module p.em { /*...*/ }
.my-module p.em em { /*...*/ }

5. LESS
The dynamic stylesheet language
• Könnyen tanulható
• Elterjedt, aktívan fejlesztik (1.3.1: 2012.10.18.)
• Szintaxis kiemelés támogatottsága jó
• CSS-jellegű szintaxis
• Változók, függvények, mixinek, import
• JavaScript (Node.js, Rhino, böngésző(!)…)
• A szintaktikus hiba kezelése nem mindig megfelelő
• Nincs source map támogatás (nem hiányzott)
• Nincsen előre elkészített mixin csomag

6. LESS usage
<link rel="stylesheet/less"
type="text/css" href="styles.less">
<script src="less.js"
type="text/javascript"></script>
npm install –g less
mv style.css style.less
lessc style.less >style.css

7. LESS variables
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

8. LESS mixins
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

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

10. SASS
{style with attitude}
• Viszonylag elterjedt, aktívan fejlesztik (3.2.1: 2012.08.12.)
• Szintaxis kiemelés támogatottsága viszonylag jó
• Kétféle szintaxis (SASS: Syntactically Awsome
CSS, SCSS: Sassy CSS)
• Változók, függvények, mixinek, nested import
• Ruby gem
• Hiba kezelése megfelelő
• Debugolást könnyítő output, FireSass
• Compass: széleskörű SASS-ra épülő keretrendszer

11. SASS usage
gem install sass
mv style.css style.scss
sass --watch style.scss:style.css

12. SASS variables
$blue: #3bbfce;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}

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

14. SASS nested rules
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

15. SASS selector inheritance
.error {
.error, .badError {
border: 1px #f00;
border: 1px #f00;
}
}
.error.intrusion {
.error.intrusion,
font-size: 1.3em;
.badError.intrusion {
}
font-size: 1.3em;
}
.badError {
.badError {
@extend .error;
border-width: 3px;
border-width: 3px;
}
}

16. SASS output (expanded)
p {
p {
font-size: 2em;
font-size: 2em;
em {
}
color: #00f;
p em {
}
color: #00f;
strong {
}
color: #f00;
p strong {
}
color: #f00;
}
}

17. SASS output (nested)
p {
font-size: 2em;
p {
em {
font-size: 2em; }
color: #00f;
}
p em {
strong {
color: #00f; }
color: #f00;
}
p strong {
}
color: #f00; }

18. SASS output (nested + line numbers)
p {
/* line 1, test.scss */
font-size: 2em;
p {
em {
font-size: 2em; }
color: #00f;
/* line 3, test.scss */
}
p em {
strong {
color: #00f; }
color: #f00;
/* line 6, test.scss */
}
p strong {
}
color: #f00; }

19. SASS output (compact)
p {
p { font-size: 2em; }
font-size: 2em;
p em { color: #00f; }
em {
p strong { color: #f00; }
color: #00f;
}
strong {
color: #f00;
}
}

20. SASS output (compressed)
p {
font-size: 2em;
em {
color: #00f; p{font-size:2em}p em{co…
} …lor:#00f}p strong{colo…
strong { …r:#f00}
color: #f00;
}
}

21. Compass example (SASS)
@import "compass/utilities/tables";
.example { table {
$table-color: #7a98c6;
@include table-scaffolding;
@include inner-table-borders(1px, darken($table-color, 40%));
@include outer-table-borders(2px);
@include alternating-rows-and-columns($table-color,
adjust-hue($table-color, -120deg), #222222); } }

22. Compass example (CSS1)
.example table {
border: 2px solid black;
}
.example table th {
text-align: center;
font-weight: bold;
}
.example table td,
.example table th {
padding: 2px;
}
.example table td.numeric,
.example table th.numeric {
text-align: right;
}
.example table th, .example table td {
border-right: 1px solid #233551;
border-bottom: 1px solid #233551;
border-left-width: 0px;
border-top-width: 0px;
}
.example table th:last-child, .example table th.last, .example table td:last-child, .example table td.last
{
border-right-width: 0px;
}

23. Compass example (CSS2)
.example table tbody tr:last-child th, .example table tbody tr:last-child td, .example table tfoot
tr:last-child th, .example table tfoot tr:last-child td {
border-bottom-width: 0px;
}
.example table tbody tr.last th, .example table tbody tr.last td, .example table tfoot tr.last th,
.example table tfoot tr.last td {
border-bottom-width: 0px;
}
.example table thead th {
border-bottom: 2px solid black;
}
.example table tfoot th, .example table tfoot td {
border-top: 2px solid black;
}
.example table th:first-child {
border-right: 2px solid black;
}
.example table th {
background-color: white;
}
.example table th.even, .example table th:nth-child(2n) {
background-color: #dddddd;
}
.example table tr.odd td, .example table tr:nth-child(2n+1) td {
background-color: #98c67a;
}

24. Compass example (CSS3)
.example table tr.odd td.even, .example table tr.odd td:nth-child(2n), .example table tr:nth-child(2n+1)
td.even, .example table tr:nth-child(2n+1) td:nth-child(2n) {
background-color: #76a458;
}
.example table tr.even td {
background-color: #7a98c6;
}
.example table tr.even td.even, .example table tr.even td:nth-child(2n) {
background-color: #5876a4;
}
.example table tfoot th, .example table tfoot td {
background-color: white;
}
.example table tfoot th.even, .example table tfoot th:nth-child(2n), .example table tfoot td.even,
.example table tfoot td:nth-child(2n) {
background-color: #dddddd;
}

25. FireSass, FireStylus

26. Stylus
Expressive, dynamic, robust CSS
• Kevésbé elterjedt, aktívan fejlesztik (0.30.1: 2012.10.17.)
• Szintaxis kiemelés van például Textmate-hez
• Opcionális szintaxis
• Változók, függvények, mixinek, import
• Node.js
• Hiba kezelése kitűnő (környezetet is mutat)
• Debugolást könnyítő output, FireStylus
• Nib (előre elészített mixinek és stílusok)

27. Stylus syntax (full)
body {
font: 12px Helvetica, Arial;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

28. Stylus syntax (minimal)
body
font 12px Helvetica, Arial
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px

29. Stylus usage
npm install –g stylus
stylus –C style.css style.sty
stylus <style.sty >style.css

30. Stylus variables
font-size = 14px
font = font-size "Lucida Grande", Arial
body
font font sans-serif
(kezdődhet $ jellel…)

31. Stylus property lookup
#logo
width 150px
height 80px
margin-left -(@width / 2)
margin-top -(@height / 2)

32. Stylus mixins
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius(5px)

33. Stylus nested rules
ul
li a
display block
color blue
padding 5px
html.ie &  inspired by SASS
padding 6px
&:hover
color red

34. Stylus error reporting
Error: /tmp/stylus/test.styl:4
1|
2| body {
3| form input {
> 4| background: foo[fail];
5| }
6| }
7|
cannot perform foo[(fail)]
at "form input" (/tmp/stylus/test.styl:4)
at "body" (/tmp/stylus/test.styl:3)

35. FAQ
• Teljesítmény: nem romlik, ha ésszel használjuk
• CSS-be hackelés elkerülése a build folyamat
tisztázásával
• Megjegyzések: az egysoros silent, a CSS comment
megmarad, a LESS kivételével van buffered is.
• Előny: átállás során egységesítés, majd a változtatás
könnyedén ment
• CSS változók: majd egyszer…

36. After all…
Nem az a kérdés, hogy használjunk-e CSS
előfeldolgozót, hanem hogy melyiket.
• Ha egyszerűt szeretnénk: LESS
• Ha hajlandók vagyunk tanulni: SASS
• Ha kihívás kell: Stylus

37. Kérdések?
Farkas Máté
Web konferencia, 2012. október 20.

38. Links
Az előadó:
• http://farkas-mate.hu/
• http://virtual-call-center.eu/
A bemutatott eszközök:
• http://lesscss.org/
• http://sass-lang.com/
• http://compass-style.org/
• http://learnboost.github.com/stylus/