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

Is calc(--x - y) a valid CSS syntax?

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）--无效。

---

Why are they (Semantic UI) using it?

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

---

Let's try to reproduce this using LESS.

以下代码构建类似于semantic.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);
}

在较早的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