SCSS-Variablen

Dank assets/main/scss/_variables.scss haben wir die Möglichkeit, die Standard-SCSS-Variablen von Theme und Bootstrap zu ändern.

Warum SCSS-Variablen?

Obwohl wir das CSS über assets/main/scss/_custom.scss überschreiben können, wird dies letztendlich die Größe des CSS-Bundles erhöhen, die SCSS-Variable jedoch in den meisten Fällen nicht.

Beispielsweise gibt es eine Standardanimation für das Logo beim Hover.

1.top-app-bar .logo:hover {
2    transform: rotate(-5deg) scale(1.1);
3}

Es kann über benutzerdefiniertes SCSS deaktiviert werden.

1.top-app-bar {
2    .logo {
3        &:hover {
4            transform: none;
5        }
6    }
7}

Aber der vorherige Stil, den wir nicht brauchen, ist immer noch im CSS-Bundle vorhanden, da wir ihn einfach durch das benutzerdefinierte SCSS überschrieben haben.

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}

Und die SCSS-Variablen generieren keinen unbenutzten Stil im CSS-Bundle.

1$logo-animation: false;

Eine kleinere CSS-Bundle-Größe bedeutet eine bessere Leistung. Wir empfehlen daher, wenn möglich, SCSS-Variablen zu verwenden.

Bootstrap-SCSS-Variablen

Sie finden die in Bootstrap integrierten SCSS-Variablen im Quellcode und offizielle Dokumentationen.

Thema SCSS-Variablen

Paletten

Optionen