CSS előfeldolgozók (tréning) A LESS, SASS és Stylus CSS előfeldolgozók rövid bemutatása egy rövid 1 órás bemutatóhoz.

1. CSS előfeldolgozók
Design kényelmesen

2. Stíluslapok tegnap: redundancia
.sidebar {
color: #445566;
}
.menu {
color: #445566;
}

3. Stíluslapok tegnap: CSS3
-webkit-transition: width 2s;
transition: width 2s;

4. Stíluslapok tegnap: helyérzékeny
szelektorok
.menu { … }
.menu ul { … }
.menu li { … }
.menu li a { … }
.menu li a span { … }
.menu li a img { … }

5. Stíluslapok tegnap: fájlok
<link … href="template.css">
<link … href="page.css">
<link … href="sidebar.css">
<link … href="admin.css">
<link … href="datatable.css">

6. Stíluslapok ma
• A CSS szintaxisa elavult
• Nincsenek változók 
• Nincsenek függvények
• Nincs // comment
• De van megoldás!

7. Stíluslapok ma

8. LASS
• Első CSS előfeldolgozó
• Javascript alapú fordító
• Folyamatosan fejlesztik még mindig
• Nagyon könnyen tanulható
• Nehéz debuggolni
• Van mixin könyvtár hozzá
• http://lesscss.org/

9. LESS: változók
@peltex-zold: #00cc22;
@peltex-kek: #1144bc;
#sidebar {
background-color: @peltex-kek;
}

10. LESS: mixinek
.bordered {
border-top: dotted 1px black;
border-bottom: dotted 2px black;
}
table td {
.bordered;
}

11. LESS: mixinek paraméterrel
.bordered (@thick: 1px) {
border-top: dotted @thick black;
border-bottom:dotted @thick black;
}
table td {
.bordered(2px);
}

12. LESS: mixin könyvtár
• Rengeteg előre definiált mixin
• Ahogy a szabványosítás halad, a
könyvtár is frissül (pl. border-radius)
• Példa:
.gradient(#F5F5F5, #EEE, #FFF);
.rounded(5px);
• http://lesselements.com/

13. LESS: nesting
.menu {
height: 40px;
ul {
padding-left: 0;
}
li {
border: 1px solid brown;
&:first-child {
border-left: 0;
}
}
}

14. LESS: matek és függvények
• Matek
@var: (1px + 5);
color: (#888 / 4);
• Függvények
width: percentage(0.5); // 50%

15. LESS: egyebek
• Kommentek
Van // 
• Statikus linkelés
@import "lib.css";
• Fordításkor összeszerkesztődik!

16. SASS
• Folyamatosan fejlesztik
• Könnyen tanulható
• Többet tud mint a LESS
• Remek debugger
• Ruby alapú fordító
• A SASS elérhető Gemként
• Van mixin könyvtár hozzá
• http://sass-lang.com/

17. SASS telepítés és használat
$ gem install sass
$ mv style.css style.scss
$ sass --watch style.scss:style.css

18. SASS: változók
$blue: #3bbfce;
$margin: 16px;
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

19. SASS: mixinek (paraméterrel)
@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;
}

20. SASS: mixin könyvtár
• Rengeteg előre definiált mixin
• Ahogy a szabványosítás halad, a
könyvtár is frissül (pl. border-radius)
• Példa:
.simple { @include border-radius(4px, 4px); }
font-face($name, $font-files, $eot, $weight, $style)
• http://compass-style.org

21. SASS: nesting, matek és függvények
Ugyanúgy mint LESS-ben

22. SASS: öröklődés
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
FORDÍTÁS

23. SASS vezérlési szerkezetek
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else {
color: black;
}
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

24. SASS egyebek
• Itt is van //
• Statikus linkelés mint LESS-ben
• CSS tömörítés
• …és nagyon jó debugger!

25. csak elvetemülteknek
• Folyamatosan fejlesztik
• Nehezen tanulható
• Nagy kifejezőerő
• Remek debugger
• Javascript alapú fordító
• Van mixin könyvtár hozzá
• Csak hardcore arcoknak
• http://learnboost.github.io/stylus/

26. innen indulunk
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

27. a kapcsos zárójelek
feleslegesek…
body
font: 12px Helvetica, Arial, sans-serif;
a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

28. …a pontosvessző is…
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px

29. …ne álljunk meg itt, menjen a
pontosvessző is!
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px

30. de ez csak mind opcionális
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

31. változók
font-size = 14px
body
font font-size Arial, sans-serif
#logo
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)

32. mixinek (paraméterrel)
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius(5px)

33. mixinek (paraméterrel)
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

34. mixin könyvtár
• Ahogy már eddig láthattuk
• Példa:
body
background linear-gradient(top, white, black)
• http://visionmedia.github.io/nib/

35. nesting, matek és függvények
Természetesen ezt is tudja.

36. öröklődés
.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message;
color: #E2E21E;
}
.message,
.warning {
padding: 10px;
border: 1px solid #eee;
}
.warning {
color: #E2E21E;
}
FORDÍTÁS

37. vezérlési szerkezetek
box(x, y, margin = false)
padding y x
if margin
margin y x

38. egyebek
• Használható a //
• Statikus linkelés
• CSS tömörítés
• Nagyon jó debugger

39. Élő demó?