CSS preprocesory

Mixiny jsou nastaveny z definic které sestavujete podle některých parametrů či statických pravidel. S nimi můžete snadno psát "cross-browser" vlastnosti, které potřebují různé prefixi např. background-gradient, border-radius, box-shadow a další. Jde o pojmenovaný kus kódu, který používáte na různých místech codebase pouhým voláním názvu.

Na příkladu si definujeme mixin, který bude danému selektoru přidá vlasnost border s parametrem width, který bude proměnný a který zadáme při volání. Dále mu do výsledného CSS přidá pseudotřídu :hover. Pokud bychom chtěli proměnnou i další hodnoty, nejen šířku, přidáme mezi parametry v hlavičce mixinu oddělovač  , .

@mixin bordered($width) {
    border: $width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    @include bordered(5px);
}SASS

.bordered (@width) {
    border: @width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    .bordered(5px);
}LESS

bordered(w)
    border: n solid #ddd
    &:hover
        border-color: #999

h1
    bordered(5px)stylus

h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }css

Pokračujte na další kapitolu