CSS preprocesory – proč a jak je používat - Webdesign & Tvorba webových stránek

CSS preprocesory – proč a jak je používat

CSS preprocesory jsou nástroje, které rozšiřují běžné CSS o nové funkce jako proměnné, zanořování, cykly nebo funkce. Následně se přeloží (kompilují) do klasického CSS, které se načítá v prohlížeči. Mezi nejznámější patří Sass, Less a Stylus.

Proč používat CSS preprocesor?

• Úspora času: Díky proměnným a zanořování nemusíte opakovat stejný kód.
• Snadnější údržba: Stylování je přehlednější, modulární a lépe strukturované.
• Pokročilé funkce: Mixiny, podmínky, cykly, dědičnost – to vše běžné CSS neumí.

Nejčastější CSS preprocesory

Sass (SCSS)

Sass je nejrozšířenější preprocesor. Existují dva zápisy: .sass (bez složených závorek a středníků) a .scss (rozšíření klasického CSS).

// proměnná
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  padding: 10px;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Less

Less je podobný Sassu, ale používá jinou syntaxi proměnných a některé funkce se zapisují jinak.

@primary-color: #3498db;

.button {
  background-color: @primary-color;
  &:hover {
    background-color: darken(@primary-color, 10%);
  }
}

Stylus

Stylus je flexibilní a tolerantní k syntaxi – nemusíte používat středníky ani složené závorky, ale můžete, pokud chcete.

primary-color = #3498db

.button
  background-color: primary-color
  &:hover
    background-color: darken(primary-color, 10%)

Srovnání preprocesorů

Vlastnost	Sass	Less	Stylus
Proměnné	$nazev	@nazev	nazev = hodnota
Mixiny	@mixin, @include	.mixin()	mixin()
Zanořování	✓	✓	✓
Podmínky, cykly	✓	✓	✓
Kompilace	node-sass, Dart Sass	lessc	stylus

Jak preprocesory používat?

Preprocesorový kód se nepoužívá přímo v HTML. Musí se nejprve přeložit do běžného CSS. To lze provést pomocí nástrojů jako:

• npm balíčky (např. sass, less)
• buildovací nástroje (Webpack, Gulp)
• online kompilátory nebo rozšíření v editorech (např. VS Code)

Závěr

CSS preprocesory zvyšují efektivitu, organizaci i čitelnost stylů. Pokud pracujete na větších projektech nebo s více vývojáři, jsou téměř nepostradatelné. Výběr konkrétního nástroje záleží na vašich preferencích a prostředí projektu.