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 语法，如果我去掉那个 "extra" 减号，一切都会好起来的。

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 Whosebug</p>

因此在您的情况下（计算 -1 * -1 = 1）-- 无效。

他们（语义 UI）为什么使用它？

semantic.css file is the result of a LESS script (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). But since LESS 3.0 no math is performed within calc so 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

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

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

css

minify

css-calc

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

他们（语义 UI）为什么使用它？

让我们尝试使用 LESS 重现这个。