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月）总是返回浮点数，而counter-reset（以及许多其他CSS属性）仅适用于整数价值观。为此，csswg-drafts上有一个issue：

现在，calc()仔细跟踪数字表达式（否   单位或％s）保证可以解析为整数，或者可能解析为   到更一般的数字。这使得它可以在诸如   z-index。

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

从本质上讲，此建议已被接受，但似乎尚未在浏览器中实施。例如，the relevant Chromium issue（准确地说是关于无法将calc除法结果用作CSS Grid的参数）已经在两周前打开了。

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变量（十进制和除法）

2 个答案: