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