主題化Bootstrap(4)在SCSS中使用CSSVars

使用變亮/變暗功能（如警報使用）的作業解決方案。

我正在嘗試在用戶可以動態更改配色方案的站點上實施 Bootstrap。
我已經按照本指南使用 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)

因此警報背景上沒有顏色。

uj5u.com熱心網友回復：

我不確定 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));
}

uj5u.com熱心網友回復：

所以你確實想保留deg. 而不是從 Bootstrap 中洗掉它，您只需要更新您的變數以包含相同的deg單位。

就您現在的代碼而言，您正在添加0deg 207，但您應該添加0deg 207deg. 添加這些單位將使您的樣式開始正常作業。

根據經驗，您的所有樣式都應包含相應的單元，與 Bootstrap 已有的單元相匹配：

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

我要做的唯一其他標注是，對于您的不透明度值，您當前正在添加的1 1結果是不透明度為2，超過上限1100%。

如果您添加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));
}

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

標籤：html css 推特引导 蠢货

上一篇：為什么我的Bootstrap輪播只移動一次？

下一篇：ScrollView在Xamarin中截斷網格