1. Jak to funguje? 2. Co to umí? 3. Přínos pro mě? 4. Debugování 5. Který vybrat?

1. Martin Michálek
@machal
CSS
preprocesory
WordCamp Prague
22. února 2014

3. Program
1.
2.
3.
4.
5.
Jak to funguje?
Co to umí?
Přínos pro mě?
Debugování
Který vybrat?

4. Zkuste si to!
LESS2CSS, SassMeister, Try Stylus

5. Jak to
funguje?

6. Kompilace v GUI
Prepros, Koala, CodeKit…

7. Grunt.JS
Preprocesory, sprity, concat, Autoprefixer…

8. Příkazová řádka
npm install less
lessc style.less style.css
npm install stylus
stylus -­‐-­‐watch style.styl > style.css

9. V prohlížeči
<script src="less.js"></script>
<script>less.watch();</script>

10. Co to umí?

11. Proměnné
@brand-­‐primary: #428bca;
!
@import "bootstrap/bootstrap";
$medium-­‐up: "only screen and (min-­‐width: 600px)";
!
@media #{$medium-­‐up} {
// …
}

12. Mixiny
CSS
.ellipsis {
text-­‐overflow: ellipsis;
overflow: hidden;
white-­‐space: nowrap;
}
.ellipsis {
text-­‐overflow: ellipsis;
overflow: hidden;
white-­‐space: nowrap;
}
!
!
.el {
.ellipsis;
margin-­‐bottom: 1.5em;
}
.el {
text-­‐overflow: ellipsis;
overflow: hidden;
white-­‐space: nowrap;
margin-­‐bottom: 1.5em;
}

13. Parametrické mixiny
@mixin transition($par) {
-­‐webkit-­‐transition: $par; // Chrome 1-­‐25, Safari 3.2+
-­‐moz-­‐transition: $par; // Firefox 4-­‐15
-­‐o-­‐transition: $par; // Opera 10.50–12.00
transition: $par; // Chrome 26, Firefox 16+, IE 10+, Opera 12.10+
}
!
.el {
@include transition(all 100ms ease-­‐out);
}
CSS
.el {
-­‐webkit-­‐transition: all 100ms ease-­‐out;
-­‐moz-­‐transition: all 100ms ease-­‐out;
-­‐o-­‐transition: all 100ms ease-­‐out;
transition: all 100ms ease-­‐out;
}

14. Extend
CSS
.pel {
color: white;
}
!
.mel {
@extend .pel;
background: black;
}
.pel, .mel {
color: white;
}
!
.mel {
background: black;
}

15. Zanořování a
selektor rodiče
CSS
.nav {
margin: 0;
.nav-­‐item {
display: inline-­‐block;
}
.nav {
margin: 0;
}
!
!
.nav .nav-­‐item {
display: inline-­‐block;
}
&.nav-­‐hidden {
display: none;
}
}
.nav.nav-­‐hidden {
display: none;
}
!

16. Zanořování
Media Queries
.nav {
width: 25%;
!
@media only screen and (min-­‐width: 768px) {
width: 100%;
}
}
CSS
.nav {
width: 25%;
}
!
@media only screen and (min-­‐width: 768px) {
.nav {
width: 100%;
}
}

17. Matematika
CSS
width: 66.326530612%; /* 650 / 980 * 100 */

18. Matematika
CSS
width: 66.326530612%; /* 650 / 980 * 100 */
width: percentage(650 / @container-­‐width);
// ! width: 66.326530612%;

19. Podmínky
CSS
$type: monster;
!
.el {
@if $type == ocean {
color: blue;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
.el {
color: green;
}

20. Cykly
icons = facebook, twitter, google-­‐plus;
!
for icon in icons {
.{icon}-­‐icon {
background-­‐image: url('/images/'+icon+'-­‐icon.png');
}
}
CSS
.facebook-­‐icon {
background-­‐image: url("/images/facebook-­‐icon.png");
}
.twitter-­‐icon {
background-­‐image: url("/images/twitter-­‐icon.png");
}
.google-­‐plus-­‐icon {
background-­‐image: url("/images/google-­‐plus-­‐icon.png");
}

21. Import
// Knihovny
@import "lib/bourbon";
@import “lib/foundation";
@import (less) “lib/fancybox.css”;
!
// Zakladna, layout
@import "core/vd-­‐fonts";
@import "core/vd-­‐base";
@import "core/vd-­‐layout";
!
// UI moduly
@import "modules/vd-­‐ad";
@import "modules/vd-­‐box";
@import "modules/vd-­‐alert";
@import "modules/vd-­‐article";

22. Ekosystém
Bourbon, LESSHat, nib,
Compass, Susy…

23. Debugování

24. Kde jsou moje čísla řádků?
index.css

25. Firebug
FireLESS, FireSASS, FireStylus

26. Source Maps
layout.less
/*# sourceMappingURL=/test/less-­‐source-­‐maps/css/index.css.map */

27. Přínos
pro mě?

28. Kvalita kódu
• Spravovatelnost kódu
• Organizace codebase
!
Rychlost vývoje
• Rychlejší psaní a změny
• Hotové knihovny
• Vlastní knihovny

29. Který
vybrat?

30. Porovnání
Designér →
programátor
★☆☆
★★☆
★★★
Komunita
★★★
★★☆
★☆☆
Knihovny,
frameworky
★★☆
★★★
★☆☆

31. Případové studie
•
•
•
•
•
•
•
Designér?
Programátor?
Snadné učení?
Technická pokročilost?
Velikost komunity?
Bootstrap?
Foundation?
LESS
SASS, Stylus
LESS
Stylus
LESS
LESS, SASS
SASS

32. Díky!
martin@vzhurudolu.cz
twitter.com/machal
www.vzhurudolu.cz