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
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Generare token per autenicarsi sulle API di GitHub
Controllare gli accessi IP alle app con Azure Container Apps
Eseguire operazioni con timeout in React
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Aggiungere interattività lato server in Blazor 8
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Migrare una service connection a workload identity federation in Azure DevOps
Inizializzare i container in Azure Container Apps
Utilizzare politiche di resiliency con Azure Container App
Utilizzare la libreria Benchmark.NET per misurare le performance
Utilizzare le collection expression in C#