css - 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:

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes, except -- itself, which is reserved for future use by CSS. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

使用自定义属性的示例:

: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) :

Essentially, the calc() bug was recently fixed and no math is performed within calc(). But functions within calc() will still perform math on their arguments (unless the inner function is also calc).
source: https://github.com/less/less.js/issues/3221#issuecomment-398610371