在Sass函数中使用某些Bootstrap Sass颜色变量时，如果出现"is not a color"错误,

cwdobuhd 于 6个月前发布在 Bootstrap

关注(0)|答案(5)|浏览(92)

先决条件

我有一个 searched 用于处理重复或已关闭的问题
我有一个 validated 的任何HTML以避免常见问题
我阅读了 contributing guidelines

描述问题

在Bootstrap变量上调用Sass颜色函数，该变量的值设置为CSS变量时，会出现一个带有 "... 不是颜色" 的Sass编译错误。
鉴于5.3.0将许多Sass变量的值更改为CSS变量，这破坏了在颜色派生处使用这些变量的任何代码(包括常见的混合器，如 button-variant )。这在5.2.x中没有问题。
我认为这是与在 #38687 讨论中出现的问题相同的根本问题，但没有测试用例，请查看下面的最小复现示例。

简化的测试用例

https://stackblitz.com/edit/stackblitz-starters-tetgwb?file=src%2Fstyles.scss
如果不起作用，可以将其简化为：

@import '../node_modules/bootstrap/scss/bootstrap';
div.foo {
    background: darken($card-bg, 20%); // Compile will error here
}

您正在哪个操作系统上看到问题？

macOS

您正在哪个浏览器上看到问题？

无响应*

您使用的Bootstrap版本是什么？

5.3.0

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38735

5条答案

按热度按时间

disho6za1#

感谢报告他的问题@svdm。
确实，这与#38687(评论)中描述的精神相同。

--test: #fd0;
background: darken(var(--test), 20%);

生成编译错误：

Error: $color: var(--test) is not a color.
   ╷
79 │   background: darken(var(--test), 20%);
   │               ^^^^^^^^^^^^^^^^^^^^^^^^

回到您的示例，$card-bg现在在v5.3.0中设置为var(--bs-body-bg),并在v5.2.3中设置为$white。
这就是为什么现在会出现错误的原因。主要是因为Sass颜色函数不支持将自定义属性作为参数定义颜色。

赞(0）回复(0）举报 6个月前

wdebmtf22#

这也是一个问题，例如当设置颜色为 inherit 时，例如：

$link-color: inherit !default;
$link-hover-color: inherit !default;
$link-decoration: inherit !default;
$link-hover-decoration: inherit !default;

赞(0）回复(0）举报 6个月前

8nuwlpux3#

我在5.3.1版本中遇到了类似的问题，当我尝试覆盖$primary变量时。我已经尽力阅读了文档，这个方法在<5.1版本中是有效的，所以不确定发生了什么。你可以在这里重现这个问题：https://stackblitz.com/edit/stackblitz-starters-qgqpiu?file=README.md
如果这个bug不符合本问题的性质，那么我会很高兴地开一个单独的工单。谢谢！

赞(0）回复(0）举报 6个月前

xkrw2x1b4#

从5.3.1升级到5.3.2,再到5.3.3和5.3.4,好在我们正在远离Bootstrap。

赞(0）回复(0）举报 6个月前

disho6za5#

这个问题仍然存在，并且禁止同时使用Bootstrap变量和mixins。我们的"解决方案"目前是坚持使用5.2.3版本。使用CSS变量非常棒，但它在这里的限制是您不能使用需要计算值的mixins(因为这是编译时和运行时值之间的冲突)。

赞(0）回复(0）举报 6个月前