Extend pseudo třída

V LESS máme k dispozici pseudo třídu, která nám umožňuje získat vlastnosti z jiných selektorů. Tato pseudo třída se jmenuje extend a následující ukázka kódu ukazuje jak ji použít.

// LESS

nav ul {
    // následující řádek aplikuje na selektor vlastnosti
    // které se nacházejí v selektoru .inline
    &:extend(.inline);
    background-color: #c821de;
}

.inline {
    color: #21b8de;
}
/* zkompilované CSS */

nav ul {
    background-color: #c821de;
}

.inline,
nav ul {
    color: #21b8de;
}

Syntaxe

Extend můžeme napsat buď do těla selektoru (tam kde píšeme vlastnosti) nebo k selektoru stejně jako když píšeme pseudo třídy. První možnost byla ukázána v ukázce výše a druhá je ukázána v ukázce níže.

// LESS

nav ul:extend(.inline) { // i takto můžeme extend použít
    background-color: #c821de;
}

.inline {
    color: #21b8de;
}
/* zkompilované CSS */

nav ul {
    background-color: #c821de;
}

.inline,
nav ul {
    color: #21b8de;
}

Extend přijímá jako parametr selektor z kterého chceme na selektor aplikovat vlastnosti. Pokud chceme, tak můžeme k tomuto parametru přidat ještě text "all", který zajistí že se vlastnosti aplikují ze všech selektorů ve kterých se daný selektor vyskytuje. Pokud bychom k parametru text "all" nepřidali, použili by se jen selektory, které vypadají přesně jako předaný selektor.

Pozn.: Extend není schopný vybrat selektory s proměnnými.

// LESS

nav ul:extend(.inline all) { // připíšeme k parametru text "all"
    background-color: #c821de;
}

.inline {
    color: #21b8de;
}

.box .inline { // připsání textu "all" zajistí že se vytvoří selektor .box nav ul
    border: 2px solid #88b22e;
}
/* zkompilované CSS */

nav ul {
    background-color: #c821de;
}

.inline,
nav ul {
    color: #21b8de;
}

.box .inline,
.box nav ul {
    border: 2px solid #88b22e;
}

Použití extend na vnořené selektory

Extend můžeme používat také na vnořené selektory. Extend se v podstatě dívá na zkompilované CSS, takže můžeme jako parametr extend pseudo třídě předat jakýkoliv CSS selektor.

// LESS

.bucket {
    // vnořený selektor
    tr {
        color: blue;
    }
}

.nejaka-trida:extend(.bucket tr) { }
/* zkompilované CSS */

.bucket tr,
.nejaka-trida {
    color: blue;
}

Extend uvnitř @media

Pokud použijeme extend uvnitř @media deklarace, tak extend vybere jen selektory uvnitř stejné @media deklarace. Selektory ve vnořených @media queries také nevybere.

// LESS

@media print {
    .screen-class:extend(.selector) {}
    .selector { // jen tento selektor se použije pro extend
        color: black;
    }
}

.selector {
    color: red;
}

@media screen {
    .selector {
        color: blue;
    }
}
/* zkompilované CSS */

@media print {
    .selector,
    .screen-class {
        color: black;
    }
}

.selector {
    color: red;
}

@media screen {
    .selector {
        color: blue;
    }
}

Proč používat extend

Nepoužívání základních tříd

Hlavní důvodem proč používat extend je ten, že nemusíme v HTML kódu přidělovat základní třídy a k nim třídy, které je trochu upravují. Můžeme tak tedy například namísto "animal bear" napsat jen "bear".

Snížení velikosti CSS souboru

Dalším důvodem může být snížení velikosti CSS souboru. Namísto přepisování vlastností jiných selektorů nebo používání mixinů můžeme některé selektory jen extendnout.

pokračovat na další část