calc(--x - y) 是有效的 CSS 语法吗？

Question

我正在使用 Visual Studio 及其捆绑功能来缩小 CSS 文件。

找到以下指令时返回错误：

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc(--0.05rem - 1.2em);
}

这就是为什么我想知道这是否是一个有效的 CSS 语法，如果我去掉那个“额外的”减号，一切都会好起来的。

Answer 1

calc(--x - y) 是有效的 CSS 语法吗？

The -- prefix is used to define custom properties:

自定义属性是名称以两个破折号（U+002D HYPHEN-MINUS）开头的任何属性，例如--foo。 <custom-property-name> 产生式对应于：它被定义为任何以两个破折号开头的有效标识符，除了 -- 本身，它保留供 CSS 将来使用。自定义属性仅供作者和用户使用； CSS 永远不会赋予它们超出此处呈现的含义。

使用自定义属性的示例：

:root {
  --back-color: red;
}
p {
  background: var(--back-color);
}

<p>Hello StackOverflow</p>

所以在您的情况下（计算 -1 * -1 = 1）-- 无效。

---

他们（语义 UI）为什么要使用它？

semantic.css 文件是 LESS 脚本 (semantic.less) 的结果。在以下屏幕截图中，您可以看到 -- 的来源。所以它看起来像一个错误或意外行为：

---

让我们尝试使用 LESS 重现它。

以下代码的构建类似于语义.less 代码：

@test: -0.05em;

.test {
    margin-left: calc(-@test);
}

编译为以下 CSS（再次使用 --）：

.test {
    margin-left: calc(--0.05em);
}

相同的代码，但没有使用calc 函数：

@test: -0.05em;

.test {
    margin-left: -@test;
}

编译成以下 CSS：

.test {
    margin-left: 0.05em;
}

如何修复它（可能的修复）？

@test: -0.05em;

.test {
    margin-left: calc(@test * -1);
}

编译成以下 CSS：

.test {
    margin-left: calc(-0.05em * -1);
}

在 LESS 早期 3.0 中，数学是在 calc 函数中执行的。所以calc(-@test) compiles to calc(0.05em)。但由于 LESS 3.0 没有在 calc 内执行数学运算，所以 calc(-@test) compiles to calc(--0.05em)：

本质上，最近修复了 calc() 错误，并且在 calc() 中不执行任何数学运算。但 calc() 中的函数仍会对其参数执行数学运算（除非内部函数也是 calc）。
来源： https://github.com/less/less.js/issues/3221#issuecomment-398610371