CSS calc() 演练场

功能

• 写 calc() 表达式，实时校验并算出结果
• ⚠️ 抓出「加减号两侧缺空格」：calc(100%-2rem) 是无效的，而它看起来正常
• ⚠️ 检查量纲：相加的两个量必须同类，乘除的一侧必须是无单位的数字
• 支持括号与嵌套 calc()，括号不配对会指出
• 容器宽度 / 字号 / 间距三个量作为自定义属性输出（--cw / --fs / --gap）
• 表达式里可以用 var() 引用这三个量
• 单位可切 px / rem / vw / %，实时看结果变化
• 校验只认数字、单位、运算符、括号与 var()，不执行任何代码（不用 eval）
• 全部在浏览器本地完成，不上传任何内容

使用方法

1. 填容器宽度、字号、间距，选一个单位
2. 在表达式框里写 calc(...)，加减号记得两侧留空格
3. 看下方的求值说明与错误提示
4. 复制生成的 CSS，自定义属性与规则一起拿走

常见问题

为什么 calc(100%-2rem) 不生效，但它看起来没问题？

因为加减号两侧必须有空格。CSS 规范要求 `+` 与 `-` 作为运算符时前后各有一个空白，`calc(100%-2rem)` 因此是非法值 —— 浏览器会把整条声明丢弃，属性回到初始值或 auto。它不报错、不警告，所以最难发现。写成 `calc(100% - 2rem)` 就好了（乘除不要求空格）。

为什么 1px * 1px 不行？

因为乘法在 CSS 里会把单位相乘：`1px * 1px` 得到的是「平方像素」，而 CSS 没有这个单位。乘除的一侧必须是无单位的数字，`1px * 2` 或 `6px / 2` 才成立。这也是 `calc()` 与普通四则运算最容易混淆的地方。

表达式会不会被当成代码执行？

不会。这里没有用 `eval` —— 那会把用户输入当代码跑。校验走的是一个只认得数字、单位、四则运算符、括号与 `var()` 的小解析器，认不出的写法一律报错。顺带一提，`eval` 也验不出上面那条空格错误：它会乐呵呵地把 `100%-2rem` 算成 98。

百分比是相对什么算的？

相对使用这个值的那个属性的参照。用在 `width` 上时相对包含块宽度，用在 `font-size` 上时相对父元素字号 —— 所以 `100%` 到底是多少，取决于它写在哪个属性上。这也是相对单位没法脱离上下文给出确切数字的原因：单位是相对值时，这里只给出量纲与参考值，不硬凑一个像素数。