CSS preprocesory

V CSS chybí vizuální hierarchie při práci s dětskými voliči. Musíme napsat selektory a jejich kombinace v samostatných řádcích. Vnoření poskytuje vizuální hierarchii jako v HTML a velmi zvyšuje čitelnost. Příliš předimenzování selektorů také škodí, doporučuje se maximálně tři selektory.

Zápis je velmi podobný syntaxi v HTML.

$link-color: #999;SASS
$link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: $link-color;

        &:hover {
            color: $link-hover;
        }
    }
}

@link-color: #999;LESS
@link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: @link-color;

        &:hover {
            color: @link-hover;
        }
    }
}

link-color = #999Stylus
link-hover = #229ed3

ul
    margin 0
    li
        float left
    a
        color link-color
        &:hover
            color link-hover

Výsledné CSS:

ul { margin: 0; }CSS
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }

Pokračujte na další kapitolu