Less i extend

Mamy podstawowy styl dla button powiedzmy taki:

.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0 5px 0 black;
}

Chcemy zrobić następne buttony o kolorze blue i red, zamiast za każdym razem dodawać do każdego butona podstawowy styl można użyć &:extend
"extend" działa od wersji 1.4 lessa

Tworzymy style:

.button--red {
  &:extend(.button);   // pobranie podstawowych danych
  background: red;     // dodajemy kolor red, możemy dodać także i tak #c63c67 ale 
                       // i w ten sposób czyli przez ustawienie zmiennych @red-default:	#ff0000;
}

<button class="button">button</button>
<button class="button--red">button</button>