Internetový manuál CSS preprocesory (LESS, SASS, Stylus)

Proměnné

Proměnné byly celou dobu hodně chtěné funkce pro CSS. Každý vývojář chtěl definovat základní barvu a použít jí ve všech CSS souborech. Stejně jako pro color, můžeme mít proměnné pro width, font-size, font-family, border a další.

Proměnné v SASS začínají znakem $ , v LESS znakem @ a Stylus žádný speciální znak pro určení proměnné nemá. V SASS a LESS jsou hodnoty přiřazené s dvojtečkou : a rovnítko = ve Stylus.

Definovat si je můžete kdekoliv, platí pak pro celý soubor a při použití funkce @import, i v cílovém souboru.

$font-size: 16px;SASS

div {
    font-size: $font-size;
}

@font-size: 16px;LESS

div {
    font-size: @font-size;
}

font-size = 16pxStylus

div
    font-size font-size

Výsledné CSS:

div {
    font-size: 16px;
}
CSS

Názvy proměnných volte střídmě, extra v preprocesoru Stylus. Na příkladu můžete vidět, že při použití syntaxe bez speciálních znaků už začíná být relativně zmatek i v zápisu na 3 řádky.