css原生变量不支持位运算，因calc()仅接受加减乘除和括号，位运算符不在其语法范围内，解析时直接报错；所有数学运算必须显式用calc()包裹且限于布局相关类型。
不支持位运算，CSS 原生变量（即 CSS 自定义属性）本身只是字符串容器，所有数学运算必须显式包裹在 calc() 中，且 calc() 仅支持加（+）、减（−）、乘（*）、除（/）和括号，不识别 &、|、^、、<code>>> 等位操作符。
为什么 calc() 里写 --mask & 0b100 会报错
CSS 解析器在遇到 calc() 时只接受标准算术语法，位运算符不属于该语法集。浏览器会直接抛出 ParseError: unexpected token 或类似错误信息，例如：
/* ❌ 无效，解析失败 */
.element { mask: calc(var(--flag) & 0b100); }
即使变量值是数字（如 --flag: 5），calc() 也不会将其转为二进制再运算——它根本不认识 & 这个符号。
-
calc()的设计目标是布局计算（长度、百分比、角度等），不是通用表达式引擎 - 所有参与
calc()的值必须能被解析为可计算的 CSS 类型（<length></length>、<number></number>、<percentage></percentage>等），位运算结果无对应 CSS 类型语义 - 目前没有任何主流浏览器实现对位运算符的支持，规范（CSS Values and Units Level 4）也未将其纳入草案
想模拟“取某一位”该怎么做
只能靠预计算或间接映射：把位运算逻辑移到构建时或 JS 层，存成布尔类变量或离散值供 CSS 使用。
- 若需判断第 2 位是否为 1（即
value & 0b100 !== 0），可在 JS 中计算后设为--has-flag-2: 1或--has-flag-2: 0，CSS 用if(style(--has-flag-2: 1))判断（需配合@property注册类型） - 若需多个组合状态（如 8 种背景变体），建议用语义化变量名提前定义：
--state: idle/--state: active/--state: error，而非尝试用--flags: 5再现场解码 - 避免在 CSS 中用
calc(var(--n) % 2)模拟奇偶——虽然语法合法，但%在calc()中仅部分浏览器支持（Chrome 119+ 支持，Firefox/Safari 尚未跟进），且仍不解决位运算本质需求
哪些数学操作是安全可用的
当前稳定支持的仅限 calc() 内置四则运算与单位混合，且要注意隐式类型转换陷阱：
-
calc(var(--gap) * 2)✅ 合法，--gap只要能解析为<length></length>或<number></number>即可 -
calc(var(--size) + 1rem)✅ 合法，单位自动归一化（前提是可兼容，如px和rem） -
calc(var(--opacity) * 0.5)✅ 合法，用于透明度控制 -
calc(var(--x) + var(--y))✅ 合法，但两变量单位必须一致或可转换（px+em允许，px+deg报错） -
var(--n) * 2❌ 非法——漏了calc()，会当作无效声明忽略
真正需要位级控制的场景（比如图形掩码、状态压缩），CSS 变量不是合适载体；该交给 JS 计算后写入 class 或 style，或用 SVG <mask></mask> / Canvas 等更底层机制处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
