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

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

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

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

这就是为什么我想知道这是否是一种有效的CSS语法，如果我摆脱了那个“多余”减号的话，一切都会很好。

最佳答案

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重现此内容。

下列代码的构建方式类似于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);
}

在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

关于css - calc(-x-y)是有效的CSS语法吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55168760/