css preprocesory
DESCRIPTION
1. Jak to funguje? 2. Co to umí? 3. Přínos pro mě? 4. Debugování 5. Který vybrat?TRANSCRIPT
CSS preprocesory
22. února 2014WordCamp Prague
Martin Michálek @machal
Program
1. Jak to funguje? 2. Co to umí? 3. Přínos pro mě? 4. Debugování 5. Který vybrat?
Zkuste si to!LESS2CSS, SassMeister, Try Stylus
Jak to funguje?
Kompilace v GUIPrepros, Koala, CodeKit…
Grunt.JSPreprocesory, sprity, concat, Autoprefixer…
Příkazová řádka
npm install less lessc style.less style.css
npm install stylus stylus -‐-‐watch style.styl > style.css
V prohlížeči
<script src="less.js"></script> <script>less.watch();</script>
Co to umí?
Proměnné
@brand-‐primary: #428bca; !@import "bootstrap/bootstrap";
$medium-‐up: "only screen and (min-‐width: 600px)"; !@media #{$medium-‐up} { // … }
Mixiny
.ellipsis { text-‐overflow: ellipsis; overflow: hidden; white-‐space: nowrap; } !.el { .ellipsis; margin-‐bottom: 1.5em; }
.ellipsis { text-‐overflow: ellipsis; overflow: hidden; white-‐space: nowrap; } !.el { text-‐overflow: ellipsis; overflow: hidden; white-‐space: nowrap; margin-‐bottom: 1.5em; }
CSS
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); }
.el { -‐webkit-‐transition: all 100ms ease-‐out; -‐moz-‐transition: all 100ms ease-‐out; -‐o-‐transition: all 100ms ease-‐out; transition: all 100ms ease-‐out; }
CSS
Extend
.pel { color: white; } !.mel { @extend .pel; background: black; }
.pel, .mel { color: white; } !.mel { background: black; }
CSS
Zanořování a selektor rodiče
.nav { margin: 0; .nav-‐item { display: inline-‐block; } ! &.nav-‐hidden { display: none; } }
.nav { margin: 0; } !.nav .nav-‐item { display: inline-‐block; } !.nav.nav-‐hidden { display: none; }
CSS
Zanořování Media Queries
.nav { width: 25%; ! @media only screen and (min-‐width: 768px) { width: 100%; } }
.nav { width: 25%; } !@media only screen and (min-‐width: 768px) { .nav { width: 100%; } }
CSS
Matematika
width: 66.326530612%; /* 650 / 980 * 100 */ CSS
Matematika
width: 66.326530612%; /* 650 / 980 * 100 */
width: percentage(650 / @container-‐width);
// ! width: 66.326530612%;
CSS
Podmínky
$type: monster; !.el { @if $type == ocean { color: blue; } @else if $type == monster { color: green; } @else { color: black; } }
CSS
.el { color: green; }
Cykly
icons = facebook, twitter, google-‐plus; !for icon in icons { .{icon}-‐icon { background-‐image: url('/images/'+icon+'-‐icon.png'); } }
.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"); }
CSS
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";
Ekosystém
Bourbon, LESSHat, nib, Compass, Susy…
Debugování
Kde jsou moje čísla řádků?
index.css
FirebugFireLESS, FireSASS, FireStylus
Source Maps
/*# sourceMappingURL=/test/less-‐source-‐maps/css/index.css.map */
layout.less
Přínos pro mě?
Kvalita kódu • Spravovatelnost kódu • Organizace codebase !
Rychlost vývoje • Rychlejší psaní a změny • Hotové knihovny • Vlastní knihovny
Který vybrat?
Porovnání
Designér → programátor ★☆☆ ★★☆ ★★★
Komunita ★★★ ★★☆ ★☆☆
Knihovny, frameworky ★★☆ ★★★ ★☆☆
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
Díky!
[email protected] twitter.com/machal www.vzhurudolu.cz