html - CSS calc() 和 CSS 变量(小数和除法)

Question

所以我一直在尝试使用 CSS 变量来处理基础数学，并且我有以下 JSFiddle(下面代码的复制): http://jsfiddle.net/eliseo_d/ry792Lnp/7/

:root {
  --a: 51;
  --b: 32;
}

#test_add:before {
  color: red;
  counter-reset: add_res calc(var(--a) + var(--b));
  content: counter(add_res);
}

#test_sub:before {
  color: blue;
  counter-reset: sub_res calc(var(--a) - var(--b));
  content: counter(sub_res);
}

#test_mul:before {
  color: orange;
  counter-reset: mul_res calc(var(--a) * var(--b));
  content: counter(mul_res);
}

#test_div:before {
  color: green;
  counter-reset: div_res calc(var(--a) / var(--b));
  content: counter(div_res);
}

<div id="test_add"></div>
<div id="test_sub"></div>
<div id="test_mul"></div>
<div id="test_div"></div>

加法、减法和乘法 DIV 的结果是正确的，但我在使除法 DIV 工作时遇到了问题。是否必须对 CSS 变量做一些特殊的事情才能使其工作？

此外，如果我将 51 替换为 5.1，将 32 替换为 3.2，所有这些的结果最终也都为零...CSS 变量是否可以使用小数？ 请注意:我不想在这里使用 SASS 或 LESS 或任何其他预处理器，我正在尝试自行研究 CSS 变量的潜力...

提前致谢...

Answer 1

@TemaniAfif 是对的:这里的问题是 calc 除法(至少在 2018 年 8 月)总是返回一个 float ，而 counter-reset(以及许多其他 CSS 属性)仅适用于整数值。有一个 issue在 csswg-drafts 上:

Right now, calc() carefully tracks whether a numeric expression (no units or %s) is guaranteed to resolve to an integer, or might resolve to a more general number. This allows it to be used in places like z-index safely.

However, it excludes some expressions that would be integral if evaluated - for example, any division makes it non-integral, even in an expression like calc(4 / 2).

基本上，这个提议被接受了，但它似乎还没有在浏览器中实现——还没有。例如，the relevant Chromium issue (准确的说是无法使用calc除法结果作为CSS Grid的param)两周前刚刚开放。