时间戳

首页 > 解决方案 > 使用动态 CSS 变量破坏了一些 Bootstrap 主题

css - 使用动态 CSS 变量破坏了一些 Bootstrap 主题

问题描述

使用 Angular / Bootstrap，我在运行时更改了 CSS 变量，使用这行代码：

document.documentElement.style.setProperty(`--${property.name}`, property.value);

作为参考，我用这个例子来处理引导 SCSS 导入：https ://blog.wick.technology/runtime-dynamic-bootstrap-theme/

它确实有效，但是引导程序中的一些引导程序样式被破坏了： 在此处输入图像描述

我想那是因为 calc 函数不支持我的动态变量：

.btn-primary {
    color: hsla(0, 0%, calc(-100 * calc(var(--primary-l) - 58.59375%)), 1);
    background-color: var(--primary);
    border-color: var(--primary);
}

有什么办法可以解决这种行为吗？我可以重载btn-primary的新定义吗？

标签： cssangularbootstrap-4sass

解决方案

我不确定你是否已经解决了你的问题，但我遇到了同样的问题，我觉得我已经解决了。

我基本上决定创建变量"${variable}-h",${variable}-s", ${variable}-l"，这些变量是在定义变量时在运行时计算的，将RGB颜色转换为不同的HSL颜色分量。

推荐阅读