Utilizzare i mixin di LESS per dichiarare stili e riutilizzarli come proprietà di altri stili

di Stefano Mostarda, in HTML5, CSS3, LESS,

Una delle caratteristiche che più di tutte rende LESS un motore di CSS veramente potente è la capacità di creare mixin. Un mixin è un contenitore di proprietà CSS preimpostate che possiamo riutilizzare nelle nostre classi CSS. Ad esempio, se vogliamo che intestazione e piè di pagina di un documento abbiano lo stesso margin e padding, possiamo creare un mixin che imposta queste proprietà e poi negli stili dei tag header e footer referenziare il mixin.
Nel codice sottostante possiamo vedere un esempio di mixin e del suo utilizzo.

.margins {
  margin: 5px;
  padding: 10px;
}

#header {
  .margins;
}
#footer {
  .margins;
}

Come si può intuire dal codice, un mixin è dichiarato come una normale classe CSS e utilizzato come se fosse una proprietà CSS. Una volta compilato, il codice LESS genera il seguente CSS di output.

#header {
  margin: 5px;
  padding: 10px;
}
#footer {
  margin: 5px;
  padding: 10px;
}

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi