提问者:小点点

在函数中更改bootstrap sass变量


我正在用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;
  }
}

是工作。

那么,如何在函数内部自定义变量呢?

谢啦!


共1个答案

匿名用户

它不会工作,因为在您的第一个实现中,您没有设置主体的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,因为它是特定的