主题 Bootstrap(4) 在 SCSS 中使用 CSS 变量

Question

我正在尝试在用户可以动态更改配色方案的网站上实现 Bootstrap。
我在 this guide.
之后使用 CSS 变量完成了此操作它通常有效，但是当任何东西使用变亮或变暗功能（例如警报）时它不起作用。

CSS 变量在 HTML 的头部声明，像这样；

<style type="text/css">
:root {
    --primary: #3490dc;
    --primary-h: 207;
    --primary-s: 71%;
    --primary-l: 53%;
    --primary-a: 1;
    --secondary: #6c757d;
    --secondary-h: 207;
    --secondary-s: 71%;
    --secondary-l: 53%;
    --secondary-a: 1;
    --success: hsl(207, 71%, 53%);
    --success-h: 207;
    --success-s: 71%;
    --success-l: 53%;
    --success-a: 1;
    --info: #17a2b8;
    --info-h: 188;
    --info-s: 78%;
    --info-l: 41%;
    --info-a: 1;
    --warning: #ffc107;
    --warning-h: 188;
    --warning-s: 78%;
    --warning-l: 41%;
    --warning-a: 1;
    --danger: #dc3545;
    --danger-h: 188;
    --danger-s: 78%;
    --danger-l: 41%;
    --danger-a: 1;
    --light: #f8f9fa;
    --light-h: 188;
    --light-s: 78%;
    --light-l: 41%;
    --light-a: 1;
    --dark: #343a40;
    --dark-h: 188;
    --dark-s: 78%;
    --dark-l: 41%;
    --dark-a: 1;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;
}
</style>

当我检查控制台显示的警报元素时；

.alert-success {
    color: hsla(calc((
0deg + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((0% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
    background-color: hsla(calc((
0deg + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((100% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
    border-color: hsla(calc((
0deg + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((100% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
}

但是计算结果显示；

background-color: rgba(0, 0, 0, 0)

因此警报背景上没有颜色。

Answer 1

我不确定 0deg 的东西。

不过。如果我只用 0 替换 0deg，我设法让它工作。

.alert-success {
    color: hsla(calc((
0 + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((0% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
    background-color: hsla(calc((
0 + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((100% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
    border-color: hsla(calc((
0 + var(--success-h)) / 2), calc((0% + var(--success-s)) / 2), calc((100% + var(--success-l)) / 2), calc((1 + var(--success-a, 1)) / 2));
}

Answer 2

所以你确实想保留 deg。无需从 Bootstrap 中删除它，您只需更新您的变量以包含相同的 deg 单位。

按照您现在的代码，您正在添加 0deg + 207，但您应该添加 0deg + 207deg。添加这些单位将使您的样式开始正常工作。

根据经验，您的所有样式都应包含适当的单位，与 Bootstrap 已有的单位相匹配：

:root {
  --success-h: 207deg;
  --success-s: 71%;
  --success-l: 53%;
  --success-a: 1;
}

我唯一要做的其他标注是，对于您的不透明度值，您当前正在添加 1 + 1，这导致不透明度为 2，超过了上限 1 100%.

如果您添加 1 + 您的变量值只是为了在值不存在时作为后备，您可能需要考虑使用默认值。您的代码在当前状态下需要 negative 不透明度值（例如 -.5）才能使颜色半透明。如果您希望在变量不存在时使用 1 作为回退值，您可以通过在变量引用中将默认值放在逗号之后，如下所示：

.alert-success {
  color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 0%) / 2), calc(var(--success-a, 1) / 2));
  background-color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 100%) / 2), calc(var(--success-a, 1) / 2));
  border-color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 100%) / 2), calc(var(--success-a, 1) / 2));
}

如果您的所有添加都是有意的，请忽略最后一点。

主题 Bootstrap(4) 在 SCSS 中使用 CSS 变量

Theming Bootstrap(4) Using CSS Vars in SCSS

html

css

sass

twitter-bootstrap