我正在用node和bootstrap 4用Sass开发一个应用程序。 我能够自定义一些变量,例如:
...
// Buttons
$enable-rounded: false;
$input-btn-font-size: 1rem;
$input-btn-padding-x: 2rem;
$input-btn-padding-y: 0.5rem;
$custom-select-border-color: $black;
$input-border-color: $black;
$input-focus-border-color: $black;
@import "node_modules/bootstrap/scss/bootstrap.scss";
...
而且效果很好。
但是现在我想在函数中定制一个变量,比如:
@include media-breakpoint-down(lg) {
$body-color: red;
}
但不管用。
但是如果我做了
@include media-breakpoint-down(lg) {
body {
color: red !important;
}
}
是工作。
那么,如何在函数内部自定义变量呢?
谢啦!
它不会工作,因为在您的第一个实现中,您没有设置主体的color属性,您只是定义了一个变量,所以您需要做的是在main.scss文件上定义自定义的$body-color
变量,如下所示
...
// Buttons
...
$body-color: red; // here
@import "node_modules/bootstrap/scss/bootstrap.scss";
然后在介质查询中作为
@include media-breakpoint-down(lg) {
body {
color: $body-color;
}
}
如果不起作用,则添加!import
,因为它是特定的