Utilizzare i mixin di LESS con parametri

di Stefano Mostarda, in HTML5, CSS3, LESS,

Nello script #82 abbiamo vosto come creare uno stile (o mixin) e poi riutilizzarlo all'interno di altri stili. In quello script abbiamo utilizzato delle proprietà CSS statiche, ma con LESS possiamo creare anche mixin parametrici ovvero dove i valori delle proprietà CSS è deciso dall'utilizzatore del mixin.
Per fare questo dobbiamo dichiarare i parametri di input del mixin circondandoli con parentesi tonde ('(' e ')') e dividendoli con un punto e virgola ';'. Chi utilizza il mixin deve passare i parametri sempre circondandoli con parentesi tonde e separandoli con punto e virgola. Per fare un esempio pratico, se vogliamo impostare margin e padding a valori differenti per i tag HTML header e footer possiamo fare una cosa del genere:

.margins(@margin; @padding) {
  margin: @margin;
  padding: @padding;
}

header {
  .margins(5px; 10px);
}

footer {
  .margins(2px; 5px);
}


Il CSS prodotto da questo script LESS è il seguente:

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

footer {
  margin: 2px;
  padding: 5px;
}

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