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

【问题标题】：CSS calc() and CSS Variables (Decimals and Division)CSS calc() 和 CSS 变量（小数和除法）
【发布时间】：2019-02-04 20:00:03
【问题描述】：

所以我一直在尝试使用 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 变量的潜力...

提前谢谢...

【问题讨论】：

我认为问题不在于这里的变量或计算。 calc 处理完美浮动，但您在这里使用的计数器仅适用于整数
@TemaniAfif，如果 calc 处理浮点数没有问题，我不应该得到 1 的除法吗？ INT(51/32) = 1 如果我的数学没记错？
这里你假设 calc 应该舍入一个不平凡的数字.. calc 会将 reuslt 作为浮点数返回，并且计数器不会接受它......这是一个我在其中使用值的示例边框：jsfiddle.net/ry792Lnp/13 检查计算的样式以查看 calc 返回正确的值（1.594）并且它与边框一起使用，因为它接受浮点数
counter content 只能是 integer 类型，因此在进行除法时，它可能是浮点数，并且会打印 @ 987654328@

标签： html css css-variables

【解决方案1】：

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

现在，calc() 仔细跟踪数字表达式（否 units 或 %s) 保证解析为整数，或者可能解析到一个更一般的数字。这允许它在像这样的地方使用 z-index 安全。

但是，它排除了一些如果是整数的表达式评估 - 例如，任何除法都使其成为非整数，即使在像calc(4 / 2) 这样的表达式。

基本上，该提议已被接受，但似乎尚未在浏览器中实现。比如the relevant Chromium issue（准确的说是无法使用计算除法的结果作为CSS Grid的参数）就在两周前开通了。

【讨论】：

这有点糟糕，但很高兴有人就解决这个问题进行了一些讨论......知道何时实施？
那么，有没有办法在内容中显示 var() 的值，还是我必须接受计数器方法？
不是var，是除法；即使你放calc(4/2)，结果还是float，counter还是0。
@Eliseod'Annunzio 其实没办法，下面是一些案例的说明：codepen.io/textmonster404/pen/PeMmqO?editors=1100

【解决方案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>

【讨论】：