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），例如{{1} }。 --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重现此内容。

以下代码的构建类似于语义较少的代码：

--

可编译为以下CSS（再次使用@test: -0.05em; .test { margin-left: calc(-@test); } ）：

--

相同的代码，但未使用.test { margin-left: calc(--0.05em); } 函数：

calc

可编译为以下CSS：

@test: -0.05em;

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

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

.test {
    margin-left: 0.05em;
}

可编译为以下CSS：

@test: -0.05em;

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

在LESS之前的3.0中，数学是在.test { margin-left: calc(-0.05em * -1); } 函数中执行的。 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