Less Preprocesor Návod
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.
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;
}
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.
nav ul:extend(.inline) { // i takto můžeme extend použít
background-color: #c821de;
}
.inline {
color: #21b8de;
}
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.
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;
}
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.
.bucket {
// vnořený selektor
tr {
color: blue;
}
}
.nejaka-trida:extend(.bucket tr) { }
.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.
@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;
}
}
@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