CSS preprocesory

Extend je užitečná funkce pro sdílení obecných definic s voliči, spíše než jejich kopírování. Všechny rozšířené selektory, pomocí funkce extend, jsou seskupeny v kompilovaném CSS. Tuto funkci obhsahoval z prvu jen SASS, převzán byl do Stylus a letos byl přidán do poslední verze v LESS. LESS tuto funkci ještě rozšířil o možnost zvolit si výskyty tím, že buď přidá vše a nebo si můžete vybrat pouze hlavní instance. Rozšiřuje se také chainable.

.block { margin: 10px 5px; }

p {
  @extend .block;
  border: 1px solid #eee;
}

ul, ol {
  @extend .block;
  color: #333;
  text-transform: uppercase;
}SASS

.block { margin: 10px 5px; }

p {
  &:extend(.block);
  border: 1px solid #eee;
}

ul, ol {
  &:extend(.block);
  color: #333;
  text-transform: uppercase;
}LESS

.block
    margin 10px 5px

p
    @extend .block
    border 1px solid #eee

ul
ol
    @extend .block
    color #333
    text-transform uppercasestylus

Výsledné CSS:

.block, p, ul, ol { margin: 10px 5px; }

p { border: 1px solid #eee; }
ul, ol { color: #333; text-transform: uppercase; }css

Pokračujte na další kapitolu