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
Il nuovo controllo Range di Blazor 9
Creare una libreria CSS universale: Nav menu
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Referenziare un @layer più alto in CSS
Anonimizzare i dati sensibili nei log di Azure Front Door
Gestire la cancellazione di una richiesta in streaming da Blazor
Creare una custom property in GitHub
Generare velocemente pagine CRUD in Blazor con QuickGrid
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
.NET Conference Italia 2024