Bootstrap 4自定义变量不会级联？

9bfwbjaz 于 2023-04-27 发布在 Bootstrap

关注(0)|答案(2)|浏览(124)

所以，今晚我发现bootstrap中的custom.scss文件有点奇怪，我想知道我是否遗漏了什么（在本例中为#000，只是为了便于阅读）并按照我的要求删除_custom.scss中的！default标志。在_variables.scss文件中，颜色$brand-primary设置为$blue，使用！default标志。然后，$btn-primary-bg设置为$brand-primary，也使用！default标志。因此，我的想法是如果我设置：

$blue: #000000;

在自定义的.scss文件中，它应该使用$blue级联到任何变量，使其：

$brand-primary: $blue; set to #000 and then
$btn-primary-bg: $brand-primary; also set to #000000

好吧，结果是我必须在自定义sass文件中列出所有3个示例，并在它们更改为自定义颜色之前删除它们的！default标志。
所以我的自定义表单不是只有一行

$blue: #000000;

必须是

$blue: #000000 ;
$brand-primary:  $blue;
$btn-primary-bg: $brand-primary;

在自定义颜色应用到这些类之前。
我是不是漏掉了什么？我们不应该只设置一次自定义颜色，然后任何引用它的变量也会引用该自定义颜色吗？在这一点上对我来说似乎效率很低。

twitter-bootstrap

来源：https://stackoverflow.com/questions/42709490/bootstrap-4-custom-variables-dont-cascade-down

2条答案

按热度按时间

p1tboqfb1#

[在这里输入链接描述][1]变量已经定义好了，没有问题。也许你需要改变一下你在HTML中使用它们的方式。看看下面的例子，它是根据你定义的变量提供的。我建议删除“$blue”变量，直接为“$brand-primary”变量定义颜色！

[1]: https://jsfiddle.net/negin/t36ep4e8/

赞(0）回复(0）举报 2023-04-27

liwlm1x92#

$colors: (
   $blue: #000000 ;
)

你可以使用mixin来使它变得更简单

@mixin color-modifiers($attribute) {
  @each $name, $hex in $colors {
    &-#{$name} {
      #{$attribute}: $hex !important;
    }
  }
}

.text {
  @include color-modifiers(color);
}

.bg {
  @include color-modifiers(background-color);
}

然后只需添加类.text-blue或.bg-blue

赞(0）回复(0）举报 2023-04-27

我来回答

Bootstrap 4自定义变量不会级联？

2条答案

相关问题

热门标签

最新问答