Osobní stránky

Deset důvodů proč používat CSS generátory – Less a Sass

Dnes bych chtěl psát o tom, jaké jsou výhody a nevýhody CSS generátorů. Tyto programy umožňují do CSS souborů vkládat například proměnné podmínky, matematické výrazy a další. Jedná se vlastně o meta jazyk pro CSS. Jejich hlavní nevýhodou je, že z těchto souborů musíme po každé změně vygenerovat nové CSS.

U programovacích jazyků jako je Java nebo C je běžné, že se musí zdrojový kód zkompilovat do spustitelné podoby, proč to tedy nepoužít i u CSS? V současné době existují dva nejrozšířenější generátory Less a Sass. Oba umí víceméně to samé.

Less

Jedná se o první a pravděpodobně i nejznámější generátor. Less je napsaný v JavaScriptu a může běžet v prohlížeči, stačí do webové stránky přiložit JavaScript a ten se postará o překlad v prohlížeči. Generovat lze i lokálně pomocí Node.js (JavaScript běžící mimo prohlížeč).

Sass

Sass je napsaný v jazyce Ruby a je i součástí frameworku Ruby on Rails. Oproti Less umí podmínky a cykly.

Nyní představím nejdůležitější výhody, které mi generátory přinášejí.

1. proměnné

Můžeme například nastavit stejnou barvu pro všechny prvky ve stránce a především ji můžeme jednoduše změnit pro všechny prvky najednou.

@color: #4D926F;

#header {
    color: @color;
}

h2 {
    color: @color;
}

Výsledný kód bude vypadat takto

#header {
    color: #4D926F;
}

h2 {
    color: #4D926F;
}

2. zanořená pravidla

Lze použít zanoření pravidel do sebe, jako je tomu u programovacích jazyků, zamezíte tak opakování stejného kódu.

#header {
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
     }
}

Vygenerovaný kód

#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

3. funkce

Pro opakující kód stačí udělat funkci (lze i s parametry) a tu můžete následně kdekoliv použít.

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

#header {
   .rounded-corners;
}

#footer {
   .rounded-corners(10px);
}

Výsledek

#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

4. matematické operace

Někdy se nám hodí matematické operace jako +,-,*,/ pro výpočet velikosti prvku na stránce podle okolních elementů anebo zesvětlení/ztmavení barvy.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Výsledek

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}

#footer { 
  color: #114411;
  border-color: #7d2717;
}

5. podmínky

Podmínky fungují jen v Sass, lze použít operátory ==, <, >. Lze použít i else @if

@if lightness($color) < 50% {
    background-color: $brightColor;
} @else {
    background-color: $darkColor;
}

6. cykly

Pro vytváření vlastního gridu se hodí cykly. Funguje jen v Sass.

$numCols = 3

@for $i from 1 through $numCols
.container_#{$numCols}
    .grid_#{$i} { width: 2em; }

Výsledek

.container_3 .grid_1 { width: 2em; }
.container_3 .grid_2 { width: 2em; }
.container_3 .grid_3 { width: 2em; }

7. konfigurační soubory

S využitím generátorů můžeme mít jeden soubor s konfigurací a CSS měnit jen pomocí změny v konfiguraci. Dobrým příkladem je třeba twitter.

// Links
@linkColor:         #0069d6;
@linkColorHover:    darken(@linkColor, 15);

// Grays
@black:             #000;
@grayDark:          lighten(@black, 25%);
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 75%);
@grayLighter:       lighten(@black, 90%);
@white:             #fff;

8. spojení a zmenšení souborů

Je dobrým zvykem používat různé CSS soubory pro rozdílné části stránky, můžeme je pak pomocí generátoru sloučit do jednoho výsledného souboru a ten zmenšit vyhozením komentářů a nedůležitých znaků, aby se přenášelo co nejméně dat. Příklad spojení souborů

@import "reset.less";
@import "variables.less";
@import "mixins.less";

9. komentáře

Mimo klasických CSS komentářů /* a */ můžeme použít i komentář //, který platí do konce řádku a z výsledného souboru je po vygenerování odstraněn.

10. vykonání JavaScriptu

Tento příklad pravděpodobně nevyužijete, JavaScript do CSS nepatří, ale existují situace, kde by se nám hodila znát v CSS některá hodnota z JavaScriptu. Tím že je Less napsaný přímo v Javascriptu, můžeme pomocí něj spouštět i JavaScriptový kód.

@height: `document.body.clientHeight`;

Závěr

Oba generátory jsou velmi podobné a který z nich použijete je na vás. Nejdůležitějsí hledisko pravděpodobně bude podpora ve vašem oblíbeném IDE a možnost použít Ruby/JavaScript. Ať už se ale rozhodnete pro kterýkoliv z nástrojů, výhody se dostaví okamžitě. Všechny přidané funkce jsou velmi návykové a můžete použít jen část z nich. Nejpřínosnější je pro mne úspora zapsaného a neopakování stejného kódu.

Jakub Škvára


Jakub je cestovatel, blogger a webový vývojář. Zajímá se především o technické novinky a rád navštěvuje konference. Používá: Symfony2 Framework, AngularJS, NodeJS, MongoDB a další moderní technologie. Aktuálně žije v Londýně.