V posledním týdnu jsem se po dlouhé době vrátil ke čtení knihy, jejíž téma jsem lehce nakousl před mým návratem do Prahy. Což je cirka přibližně rok a nějaký ten měsíc. A jsem trošičku negativně naladěn z toho, že jsem se této problematice nevěnoval více, rovnou a déle. Prvotní zkušenost z preprocesory pro CSS byla veskrze velmi pozitivní, LeSS CSS mne nadchnulo, nicméně potom přišel NESS a veškeré kódování a hraní s preprocesory šlo úplně stranou.
Když se mi minulý týden dostala do ruky kniha „SASS for webdesigners“ očekával jsem klasický průběh. Lehce do toho nahlédnu, odložím a jako takové to půjde k ledu. Jenže SASS obsahuje několik velmi silných překvapení a tak jsem nakonec vyhrnul rukávy a rozhodl se, že si po dlouhé době zase ušpiním ruce od kódování. A dobře jsem udělal. SASS ve spolupráci s objektovým, programovým doplňkem Compass přináší zdrojovou a koncepční revoluci, která se dá, shrnou v kostce jako „Objektové programovaní v CSS“.
SASS, což je zkratka pro „Syntactically Awesome Style Sheets“ je CSS – preprocesor, který umožnuje psát CSS podobně jako jiný, běžný programovací jazyk. Zavádí deklaraci proměnných, umožnuje pracovat se smyčkami či podmínkami, umožnuje vytváření vlastních objektů či funkcí, umožňuje sdílení dat mezi soubory či práci s matematickými operátory. Je tedy možné zavést do struktury CSS logiku a může se opustit tem šílený lineární koncept. Kdo pracoval v CSS na trochu větším, nedej bože na škálovatelném projektu v mezinárodním týmu tak určitě ví o čem je řeč. Jak kód šíleně nabobtnává. (CSS is easy but usage is like nightmare)
Kombinace s Compass, což je taková databáze vytvořených pseudo funkcí – mixins, potom umožnuje volat tyto funkce napřímo kdekoliv v kódu s patřičnými parametry. Což nás přivádí zajímavé možnosti škálování SMACSS (Scalable and Modular Architecture for CSS) jednotlivých částí CSS kódu.
CSS nikdy nebude klasický programovací jazyk, to by popřelo logiku jeho vzniku, nicméně díky objektové struktuře SASS spatřuji v této kombinaci tyto 4 základní výhody:
1) Škálovatelnost – daleko přehlednější kod
2) Odstranění JavaScriptu – výrazné zrychlení interpretace kódu na straně klienta
3) Zmenšení datové velikosti *.css souboru
4) Zavedení programové logiky do CSS
Jen krátká ukázka, která hovoří za vše. Definice gradientu:
@mixin linear-gradient($from, $to) {
/* Fallback for sad browsers */
background-color: $to;
/* Mozilla Firefox */
background-image:-moz-linear-gradient($from, $to);
/* Opera */
background-image:-o-linear-gradient($from, $to);
/* WebKit (Safari 4+, Chrome 1+) */
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
/* WebKit (Chrome 11+) */
background-image: -webkit-linear-gradient($from, $to);
/* IE10 */
background-image: -ms-linear-gradient($from, $to);
/* W3C */
background-image: linear-gradient($from, $to);
}
button A {
padding: 5px 10px;
color: #fff;
@include rounded(6px);
@include linear-gradient(#42b3e2, #1a6798);
}
button B {
padding: 5px 10px;
color: #fff;
@include rounded(6px);
@include linear-gradient(Black, Red);
}
button C {
padding: 5px 10px;
color: #fff;
@include rounded(6px);
@include linear-gradient(#1f15ff, black);
}
Original picture from www.abookapart.com/ – www.abookapart.com