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 月）总是 returns 一个浮点数，counter-reset（以及许多其他 CSS properties) 仅适用于整数值。 csswg-drafts 上有一个 issue：

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）两周前刚开通

Answer 2

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

CSS calc() 和 CSS 变量（小数和除法）

CSS calc() and CSS Variables (Decimals and Division)

html

css

css-variables