Theming Bootstrap(4) 在 SCSS 中使用 CSS Vars答案

【问题标题】：Theming Bootstrap(4) Using CSS Vars in SCSSTheming Bootstrap(4) 在 SCSS 中使用 CSS Vars
【发布时间】：2021-12-14 21:00:28
【问题描述】：

我正在尝试在用户可以动态更改配色方案的网站上实施 Bootstrap。
我已经使用 CSS vars 完成了这项工作，遵循 this guide。
它通常可以工作，但是当任何东西使用变亮或变暗功能（例如警报）时，它就不起作用了。

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)

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

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案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));
}

【讨论】：

我需要在 bootstrap scss 的哪个位置更新以删除 0deg？
我不太确定。但是您可以做的是再次定义这个 .alert-success 类，以覆盖旧的。我认为这会奏效。
是的，它会，但我正在寻求一个可以在 scss 中工作的解决方案，否则我最终将不得不重新定义一半的类。

【解决方案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 + 您的变量值只是作为备用值，以防该值不存在，您可能需要考虑使用默认值。您当前状态的代码需要一个负不透明度值（例如-.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));
}

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

【讨论】：