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
ChatOps con GitHub
Scoprire cosa succede in un layer di un Dockerfile
Effettuare un loop di una GitHub Action
Abilitare HTTP/3 in ASP.NET Core 7.0
Offline first con Blazor e IndexedDB
GitHub <3 .NET
Creare una timeline da una pipeline di Azure DevOps
Creare velocemente microservice grazie a minimal API di ASP.NET Core 6
Ottimizzare la concorrenza dinamicamente con le Azure Function
Gestire errori temporanei in una comunicazione gRPC con ASP.NET Core 6
Generare le release note automaticamente tramite una GitHub Action
Gestire il timing sugli eventi all'interno di un'applicazione Blazor
I più letti di oggi
- Abilitare automaticamente Dependabot in tutti i repository di una organizzazione su GitHub
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2022 - Milano e Online
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript