Less CSS extend

Un’altra funzionalità interessante è rappresentata dalla pseudo-classe extend che può essere usata attraverso due diverse sintassi equivalenti, ovvero applicando la pseudo-classe direttamente ad un selettore o all’operatore ‘&’ all’interno di una regola.

/* file style.less */

.foo:extend(.bar) {}

// le due sintassi sono equivalenti

.foo {
  &:extend(.bar);
}

Nell’esempio riportato sopra, alla classe foo vengono assegnate le diverse dichiarazioni della classe bar. Possiamo osservare ancora una volta il comportamento appena descritto nell’esempio sottostante in cui alla classe foo vengono assegnate le dichiarazioni delle altre due classi bar e baz.

/* file style.less */
.foo {
  &:extend(.bar, .baz);
  background: yellowgreen;
}

.bar {
  color: black;
}

.baz {
  font-size: 20px;
}

/* file style.css */
.foo {
  background: yellowgreen;
}
.bar,
.foo {
  color: black;
}
.baz,
.foo {
  font-size: 20px;
}    

Vediamo un ultimo esempio in cui usiamo la pseudo-classe extend. Abbiamo una classe base ‘btn’ e due varianti ‘btn–blue’ e ‘btn-green’. Nella classe ‘btn’ inseriamo delle dichiarazioni che caratterizzano anche ‘btn–blue’ e ‘btn-green’.

/* file style.less */
.btn {
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 10px 12px;
  border: none;
}

.btn--blue {
  &:extend(.btn);
  background-color: #2196F3;
}

.btn--green {
  &:extend(.btn);
  background-color: #4CAF50;
}

Di seguito riportiamo il codice CSS generato dal compilatore.

/* file style.css */
.btn,
.btn--blue,
.btn--green {
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 10px 12px;
  border: none;
}
.btn--blue {
  background-color: #2196F3;
}
.btn--green {
  background-color: #4CAF50;
}       

In questo modo possiamo applicare solo una delle due classi ‘btn–blue’ o ‘btn-green’ agli elementi HTML senza dover utilizzare la classe base. (In alternativa potremmo comuque utilizzare un diverso selettore CSS come button[class^=”btn”] senza far uso della pseudo-classe extend)

<-- index.html -->
<button class="btn--blue">pay now</button>