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