Dalla versione 4 di Bootstrap, SCSS è il pre-processore CSS di default. Con la versione 5 sono state aggiunte delle API che si basano sull'elemento maps di questo linguaggio (documentazione disponibile all'indirizzo https://sass-lang.com/documentation/values/maps).
All'interno del nostro file SCSS dobbiamo importare una serie di file che permettano alle API di funzionare correttamente.
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities";
L'esempio più semplice è la creazione di una serie di classi che vanno ad insistere sul valore di una proprietà.
$utilities: ( "opacity": ( property: opacity, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );
A seguito della compilazione in CSS, avremo il seguente codice.
.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }
A questo possiamo aggiungere numerose varianti: dal prefisso allo stato, fino alle media-query.
$utilities: ( "opacity": ( property: opacity, class: o, // specifica il prefisso della classe state: hover, // aggiunge lo stato :hover ad ogni classe responsive: true, // inserisce varianti in media query print: true, // aggiunge media-print values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );
Per ulteriori implementazioni ed esempi è disponibile un'ottima guida anche all'interno della documentazione ufficiale https://getbootstrap.com/docs/5.0/utilities/api/.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare gRPC su App Service di Azure
Eseguire query verso tipi non mappati in Entity Framework Core
Creare gruppi di client per Event Grid MQTT
Reactive form tipizzati con FormBuilder in Angular
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare i primary constructor in C#
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Limitare le richieste lato server con l'interactive routing di Blazor 8
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare un service principal per accedere a Azure Container Registry
Sfruttare MQTT in cloud e in edge con Azure Event Grid