LESS: rozszerzenia

Dzisiaj kolejne udogodnienie w CSS dostarczane przez LESS. W klasycznym CSS nie ma możliwości dziedziczenia klas. Jeśli chcemy, aby klasa B miała właściwości klasy A oraz kilka rozszerzających wtedy zwykle musimy duplikować kod.
W LESS rozszerzenia definiuje się następująco:

.childClass {
  &:extend(.baseClass);
  background: blue;
}

.baseClass {
  color: red;
}

Na wyjściu mamy:

.childClass {
  background: blue;
}
.baseClass,
.childClass {
  color: red;
}

Inna składnia to:

.childClass {
  background: blue;
}

.baseClass {
  color: red;
}

.childClass:extend(.baseClass){}

Więcej informacji znajduje się w dokumentacji. Na blogu zwykle planuję tylko umieszczać kilka przykładów jako wprowadzenie.

Leave a Reply

Your email address will not be published.