Dankzij assets/main/scss/_variables.scss hebben we de mogelijkheid om de standaard SCSS-variabelen van thema en Bootstrap te wijzigen.
Waarom SCSS-variabelen?
Hoewel we de CSS kunnen overschrijven via assets/main/scss/_custom.scss, zal dit uiteindelijk de grootte van de CSS-bundel vergroten, maar de SCSS-variabele doet dit in de meeste gevallen niet.
Er is bijvoorbeeld een standaardanimatie voor het logo bij het aanwijzen van de muis.
1.top-app-bar .logo:hover {
2 transform: rotate(-5deg) scale(1.1);
3}
Het kan het 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, is nog steeds aanwezig in de CSS-bundel, omdat we deze gewoon hebben overschreven door de 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}
En de SCSS-variabelen genereren geen ongebruikte stijl in de CSS-bundel.
1$logo-animation: false;
Een kleinere CSS-bundelgrootte betekent betere prestaties, dus we raden u aan waar mogelijk SCSS-variabelen te gebruiken.
Bootstrap SCSS-variabelen
U kunt de ingebouwde SCSS-variabelen van Bootstrap vinden in de broncode en officiële documentatie.
Thema SCSS-variabelen
Paletten
| 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. |