Dankzij assets/main/scss/_variables.scss kunnen we de standaard SCSS-variabelen van het thema en Bootstrap aanpassen.
Waarom SCSS-variabelen?
Hoewel we CSS kunnen overschrijven via assets/main/scss/_custom.scss, vergroot dit uiteindelijk de omvang van de CSS-bundel. SCSS-variabelen doen dat in de meeste gevallen niet.
Er is bijvoorbeeld een standaardanimatie voor het logo bij hover.
1.top-app-bar .logo:hover {
2 transform: rotate(-5deg) scale(1.1);
3}
Je kunt dit uitschakelen via aangepaste SCSS.
1.top-app-bar {
2 .logo {
3 &:hover {
4 transform: none;
5 }
6 }
7}
Maar de vorige stijl die we niet nodig hebben, blijft aanwezig in de CSS-bundel, omdat we deze slechts hebben overschreven met aangepaste SCSS.
1.top-app-bar .logo:hover {
2 transform: none;
3}
4
5.top-app-bar .logo:hover {
6 transform: rotate(-5deg) scale(1.1);
7}
SCSS-variabelen genereren geen ongebruikte stijlen in de CSS-bundel.
1$logo-animation: false;
Een kleinere CSS-bundel betekent betere prestaties, dus we raden aan SCSS-variabelen te gebruiken waar mogelijk.
Bootstrap SCSS-variabelen
De ingebouwde Bootstrap SCSS-variabelen zijn te vinden in de broncode en de officiële documentatie.
Thema SCSS-variabelen
Kleurenschema’s
| Palette | Variable |
|---|---|
| Blue | $palette-blue |
| Blue Gray | $palette-blue-gray |
| Brown | $palette-brown |
| Cyan | $palette-cyan |
| Green | $palette-green |
| Indigo | $palette-indigo |
| Orange | $palette-orange |
| Pink | $palette-pink |
| Purple | $palette-purple |
| Red | $palette-red |
| Teal | $palette-teal |
| Yello | $palette-yellow |
Opties
| Variable | Default Value | Description |
|---|---|---|
$code-select | true | Select <code> content on click, except code block. |
$logo-animation | true | Enable/Disable the default animation for logo. |
$table-hover | true | Table hoverable. |
$table-bordered | true | Bordered table. |