Selektory

Když píšeme kaskádové styly pomocí preprocesoru LESS, tak narozdíl od normálního CSS můžeme do sebe různě vnořovat selektory a kód se nám potom mnohem lépe píše a čte. V této části se dozvíte co všechno můžete při psaní selektorů využít.

Vnořování selektorů

V LESS kódu můžeme do selektorů vnořovat další selektory, jak ukazuje následující ukázka. V této ukázce bude mít každý element h1, který se nachází uvnitř elementu s třídou introduction červenou barvu.

// LESS

.introduction {
    h1 { // v CSS bychom napsali: .introduction h1
        color: red;
    }
}

/* zkompilované CSS */

.introduction h1 {
color: red;
}

Používání @media a @supports uvnitř selektorů

V LESS můžeme psát @media a @supports dovnitř selektorů. V CSS bychom museli @media a @supports psát mimo selektory a do nich selektory psát znova. Když používáme LESS a napíšeme @media nebo @supports dovnitř selektoru, nemusíme psát selektor znova a jen jednoduše napíšeme vlastnosti, které chceme použít.

// LESS

.component {
    width: 30px;

    @media (min-width: 600px) {
        width: 60px;
    }
}

/* zkompilované CSS */

.component {
    width: 30px;
}

@media (min-width: 600px) {
    .component {
        width: 60px;
    }
}

V LESS do sebe můžeme také navzájem vnořovat @media nebo @supports. Při kompilaci se potom vytvoří @media nebo @supports se dvěmi nebo více podmínkami.

// LESS

.component {
    width: 30px;

    @media (min-width: 600px) {
        width: 60px;

        @media (min-resolution: 192dpi) {
            background-image: url("/img/retina2x.png");
        }
    }
}

/* zkompilované CSS */

.component {
    width: 30px;
}

@media (min-width: 600px) {
    .component {
        width: 60px;
    }
}

@media (min-width: 600px) and (min-resolution: 192dpi) {
    .component {
        background-image: url("/img/retina2x.png");
    }
}

Odkazování na předchozí selektor při vnořování

Vnořování selektorů nemusíme používat jen pro vytváření selektorů, které jsou zaměřené na elementy uvnitř nějakého jiného elementu. Pokud použijeme při vnořování znak & tak se vytvoří selektor, který bude obsahovat text předešlého selektoru a nějaký vlastní. Nejlépe to pochopíte na následující ukázce.

// LESS

.menu {
    width: 200px;

    &__item { // v CSS bychom napsali: .menu__item
        background-color: #26c026;

        &:hover { // v CSS bychom napsali: .menu__item:hover
             background-color: #1f981f;
        }
    }
}

/* zkompilované CSS */

.menu {
    width: 200px;
}

.menu__item {
    background-color: #26c026;
}

.menu__item:hover {
    background-color: #1f981f;
}

Znak & se také může hodit pro vygenerování různých kombinací selektorů oddělěných čárkou. Tuto operaci ukazuje následující ukázka kódu.

// LESS

p, a, ul, li {
    border-top: 2px dotted #366366;

    & + & {
        border-top: none;
    }
}

/* zkompilované CSS */

p, a, ul, li {
border-top: 2px dotted #366366;
}

p + p, p + a, p + ul, p + li,
a + p, a + a, a + ul, a + li,
ul + p, ul + a, ul + ul, ul + li,
li + p, li + a, li + ul, li + li {
border-top: none;
}

Selektory s podmínkami

K selektorům si můžeme přidat podmínku, která musí platit aby se selektor aplikoval. Podmínku vytvoříme tak, že za selektor připíšeme slovo "when" a závorky s výrazem, který musí platit aby se selektor použil.

// LESS

@nastavit-bilou-barvu: true;

// následující selektor se použije jen když bude platit podmínka
button when (@nastavit-bilou-barvu = true) {
color: white;
}

/* zkompilované CSS */

button {
color: white;
}

pokračovat na další část