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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Potenziare Azure AI Search con la ricerca vettoriale
Creare una libreria CSS universale: i bottoni
Cambiare la chiave di partizionamento di Azure Cosmos DB
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Ordine e importanza per @layer in CSS
Installare le Web App site extension tramite una pipeline di Azure DevOps
Referenziare un @layer più alto in CSS
Utilizzare Azure AI Studio per testare i modelli AI
Usare il colore CSS per migliorare lo stile della pagina