css变量无法直接定义布尔值，只能用--is-active: 1或0模拟开关，因其可参与calc()数值运算；true/false和字符串无法用于数值计算，会导致calc()报错。
不能直接定义布尔值，但可以用 --is-active: 1 和 --is-active: 0 模拟开关——这是唯一能在运行时生效、且能参与 calc() 运算的可行方式。
为什么不能用 true/false 或字符串当 CSS 变量开关
CSS 变量本身不区分数据类型，--flag: true 和 --flag: "false" 都只是字符串，var(--flag) 取出来仍是字面量，无法参与数值运算；calc() 会直接报错 invalid property value。浏览器只认数字、长度、角度等可计算单位。
-
--enabled: true→calc(10px * var(--enabled))失败 -
--mode: "dark"→ 无法用于控制opacity或font-weight的数值切换 - 只有
0和1（或整数）才能安全参与乘法、加法、条件组合
用 calc() + 数值开关实现样式分支
核心是把“是否启用”转成“乘多少”，靠数值缩放控制最终值。比如字体粗细、透明度、偏移量。
- 激活时加粗：
font-weight: calc(400 + var(--is-active) * 300)→--is-active: 1得 700，--is-active: 0得 400 - 显示/隐藏透明度：
opacity: calc(1 * var(--is-visible))，配合--is-visible: 0或1 - 禁止用
display: calc(...)——display不接受数值，这类属性必须靠类名或 JS 切换 - 避免小数：
--is-on: 0.5看似能做三态，但浮点精度可能导致calc()计算偏差，坚持用整数
多个开关叠加控制复杂样式
单个开关只能二选一，但多个 -- 变量相乘或相加，就能表达 AND/OR 关系。
- 同时满足“启用”和“深色模式”才生效：
color: hsl(calc(200 + var(--is-enabled) * var(--is-dark) * 30), 70%, 60%) - 互斥开关（类似 radio）：
--tab-1: 1; --tab-2: 0; --tab-3: 0，再用opacity: var(--tab-1)控制显隐 - 权重叠加：按钮禁用态 =
opacity: calc(0.4 + var(--is-disabled) * 0.6)，比单纯0/1更平滑 - 注意顺序：CSS 层叠优先级仍起作用，
:root定义的开关可被局部选择器覆盖，调试时用浏览器 DevTools 查看实际生效值
真正容易被忽略的是：所有依赖 calc() 的样式分支，都要求目标属性支持数值输入——z-index、line-height、border-width 行，background-image、content、display 不行。别指望靠一个变量控制一切，该用 class 的地方就别硬塞进 calc。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
