Bootstrap è un noto framework con componenti pre-costruiti che aiuta i web designer a costruire un sito, rapidamente. La nuova versione di Bootstrap 4.2.1 usa Sass come preprocessore di scelta. Quindi in questo blog, capiremo come sovrascrivere Bootstrap usando le variabili sass.
Sappiamo che dobbiamo sovrascrivere lo stile Bootstrap per dare un nuovo look al sito web. Proprio come per tema-sfondo, font, colori, spaziatura, ecc. le variabili sono responsabili di Scss per l’output. Qui dobbiamo sovrascrivere le variabili di default di Bootstrap. Passiamo a sovrascrivere Bootstrap.
Aggiungi Bootstrap nel progetto
Prima di tutto, scarica Bootstrap dalla pagina di download di Bootstrap. Dopo di che, faremo una cartella con il nome di vendors nella cartella scss e aggiungeremo Bootstrap in quella cartella. Non cambieremo nulla nei file di Bootstrap, perché creerà un problema in futuro quando vorrete aggiornare Bootstrap. Dopo aver creato la cartella, puoi aggiungere bootstrap.scss in quel file, che hai compilato.
In Bootstrap-4, usano il flag !default, che descrive il default della variabile predefinita. Hai solo bisogno di copiare quella variabile, aggiungere il tuo valore, e rimuovere il flag !default dalla variabile.
Override Variables
Bootstrap ha il suo “_variables.scss” nella cartella “scss”, che contiene tutte le variabili usate in Bootstrap. Ora, aggiungi la cartella “abstracts” nella tua cartella scss e crea “_custom-variables.scss” in quella cartella.
Ora, apri Bootstrap > scss > “_variables.scss”. Non stiamo cambiando le variabili di Bootstrap qui direttamente, quindi copieremo le variabili da “_variables.scss”, e incolleremo in “_custom-variables.scss”. Dopo aver incollato le variabili, puoi aggiungere un nuovo valore nelle variabili.
Devi aggiornare il colore primario del tema (blu), e definirlo nel tuo file “_custom-variables.scss”. La variabile deve venire prima di tutte le dichiarazioni @import. Quando compili il codice Sass, questo nuovo colore $primario può essere usato per tutto il codice che fa riferimento alla variabile $primario.
Modificare i punti di interruzione predefiniti
Punti di interruzione della griglia
I punti di interruzione del botstrap sono anche definiti nel file _variables.scss. Ecco i valori predefiniti:
È possibile cambiare i breakpoints attuali o aggiungerne di nuovi. Hai solo bisogno di sovrascrivere la variabile $grid-breakpoints aggiungendo solo i valori richiesti.
Containers Width
Bootstrap container-max-widths sono anche definiti nel file _variables.scss. Ecco i valori predefiniti:
Aggiornato in “_custom-variables.scss”
Personalizza le regole di spaziatura
Bootstrap fornisce un set di spaziatura, che aiuta nella regolazione della spaziatura. Le variabili $spacer e $spacer gestiscono il valore base delle spaziature. È possibile aggiornarle, aggiungerle e sovrascriverle.
Variabili predefinite in Bootstrap
Variabili di override
Bootstrap fornisce anche molte variabili che possiamo override come:
Tabelle, Pulsanti, Forme, Dropdowns, Navbar, Paginazione, Tooltips, Modals, ecc…
Usa solo quello che ti serve
Bootstrap ha così tanti componenti che puoi usare, ma non devi usare tutti i componenti che sono forniti da bootstrap. Hai il controllo su bootstrap, quindi includi i componenti che sono necessari. Se non li includerete, allora il file CSS sarà più leggero con meno codice. E potrete includere quei componenti ogni volta che ne avrete bisogno in futuro. Se hai bisogno di usare i componenti in futuro, allora semplicemente decommentali.
Alcune variabili utili
Bootstrap fornisce alcune importanti opzioni globali che puoi attivare. Come border-radius, box-shadow, e gradienti, ecc.
Puoi trovare queste variabili nel file scss/_variables.scss.
$enable-caret: Usa per abilitare lo pseudo elemento caret su .dropdown-toggle.
$enable-rounded: Da usare per aggiungere o rimuovere il raggio del bordo (default: true)
$enable-shadows: Da usare per aggiungere o rimuovere box-shadows (default: false)
$enable-gradients: Da usare per i gradienti tramite l’immagine di sfondo (default: false)
$enable-transitions: Usare per aggiungere o rimuovere transizioni (default: true)
$enable-grid-classes: Per aggiungere o rimuovere classi per il sistema a griglia (default: true)
$enable-print-styles: Abilita gli stili per ottimizzare la stampa.
Puoi controllare le opzioni sass qui:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Conclusione
Hai visto come è facile sovrascrivere bootstrap -saas usando le variabili saas. Abbiamo cercato di fornirvi una guida dettagliata per aiutarvi nel processo con immagini e funzioni passo dopo passo. È super facile sovrascrivere il bootstrap, a patto di sapere come trovare le variabili importanti. E se siete passati attraverso il nostro blog, allora siete tutti pronti a sovrascrivere!