在SCSS中使用CSS变量定制Bootstrap 4主题：动态配色场景下lighten/darken函数失效问题

阿华AIGC实验室

2026-4-30

解决Bootstrap主题切换中lighten/darken函数失效的问题

这问题我之前也碰到过，根源在于CSS变量的单位不匹配，导致浏览器没法正确解析Bootstrap生成的hsla()计算值，最终alert背景变成透明。下面给你一步步解决：

问题分析

从你贴的.alert-success样式能看到，Bootstrap把Sass的lighten()这类函数转换成了基于HSL分量的calc计算：

.alert-success {
  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)
  );
}

但你的:root变量里，--success-h这类色相变量是无单位的数字（比如--success-h: 207;），而CSS的hsl()色相参数要求是带deg单位的角度值。浏览器计算0deg + 207时，会因为单位不匹配得到无效值，最终导致hsla()解析失败，显示rgba(0, 0, 0, 0)。

另外你变量定义里还有复制粘贴的错误（比如--success的hsl值和primary完全一样，--warning-h用了info的色相），这也会导致主题颜色混乱，得一起修正。

解决方案

1. 给色相变量添加`deg`单位

修改:root中的色相变量，给每个-h结尾的变量加上deg单位，同时修正各主题色对应的正确HSL参数：

<style type="text/css">
:root {
  --primary: #3490dc;
  --primary-h: 207deg;
  --primary-s: 71%;
  --primary-l: 53%;
  --primary-a: 1;
  
  --secondary: #6c757d;
  --secondary-h: 210deg;
  --secondary-s: 10%;
  --secondary-l: 40%;
  --secondary-a: 1;
  
  --success: #28a745;
  --success-h: 134deg;
  --success-s: 61%;
  --success-l: 41%;
  --success-a: 1;
  
  --info: #17a2b8;
  --info-h: 188deg;
  --info-s: 78%;
  --info-l: 41%;
  --info-a: 1;
  
  --warning: #ffc107;
  --warning-h: 51deg;
  --warning-s: 100%;
  --warning-l: 50%;
  --warning-a: 1;
  
  --danger: #dc3545;
  --danger-h: 354deg;
  --danger-s: 77%;
  --danger-l: 55%;
  --danger-a: 1;
  
  --light: #f8f9fa;
  --light-h: 210deg;
  --light-s: 17%;
  --light-l: 98%;
  --light-a: 1;
  
  --dark: #343a40;
  --dark-h: 210deg;
  --dark-s: 10%;
  --dark-l: 20%;
  --dark-a: 1;
  
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>