css - 在具有几个默认值的 CSS 变量的 calc() 上发布 CSS 解析错误

Question

我正在使用 Post CSS 运行 Nuxt.JS 项目，并在生成项目的静态版本时出现以下错误：

JisonParserError: Parse error on line 1:
calc(100% / 12) * var(--cols-md, var(--cols-sm, var(--cols, (12))))
-----------------------------------------------------------------^

失败的 CSS 片段——但根据 W3C CSS Validator 是正确的标记——看起来像这样：

@media (min-width: 1024px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-md, var(--cols-sm, var(--cols, 12))));
  }
}

奇怪的是，它在添加第三个后备后开始失败。因为这个在文档中更靠前的片段被正确解析了。

@media (min-width: 768px) {
  .c-col {
    width: calc(calc(100% / 12) * var(--cols-sm, var(--cols, 12)));
  }
}

有什么帮助吗？谢谢！

Answer 1

找到了答案：这似乎是一个错误：https ://github.com/postcss/postcss-calc/issues/104 somone 还发布了一个解决方法：暂时将一大块变量保存到另一个变量中以将其用作中介。