SCSS 變量

感謝 assets/main/scss/_variables.scss，我們可以更改主題和 Bootstrap 的默認 SCSS 變量。

為什麽選擇 SCSS 變量？

雖然我們可以通過 assets/main/scss/_custom.scss 覆蓋 CSS，但這最終會增加 CSS 包的大小，而大多情況下 SCSS 變量不會。

舉個例子， 鼠標懸停在 Logo 時有一個默認的動畫。

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

我們可以通過自定義 SCSS 以禁用它。

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

但因為我們只是覆蓋了樣式，之前我們不需要的樣式仍會出現在 CSS bundle 中。

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 則不會生成未使用的樣式。

1$logo-animation: false;

較小的 CSS bundle 意味著更好的性能，所以我們建議盡可能使用 SCSS 變量。

Bootstrap SCSS 變量

您可以從源代碼和官方文檔 中找到 Bootstrap 內置的 SCSS 變量。

主題 SCSS 變量

Palettes

Options