CODEWITHSUNDEEP
htmlcsscss-variables
Eliseo D'Annunzio
Eliseo D'Annunzio

Reputation: 592

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

So I've been experimenting with CSS variables just to work with basic math, and I have the following JSFiddle (replication of code below): 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>

The results for the addition, subtraction and multiplication DIVs is correct, but I've had trouble getting the division DIV to work. Is there some special thing that must be done with the CSS variables for this to work?

Also, if I were to replace 51 with 5.1 and 32 with 3.2, the results for all of them also end up as zero... Is there any way that CSS Variables can work with decimals? Please note: I don't want to work with SASS or LESS or any other preprocessor here, I'm trying to investigate the potential I have with CSS variables on their own...

Thanks in advance...

Upvotes: 3

Views: 6387

Answers (2)

user15799783
user15799783

Reputation: 

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

Upvotes: 0

raina77ow
raina77ow

Reputation: 106385

@TemaniAfif is right: the problem here is that calc division (at least in August 2018) always returns a float, and counter-reset (as well as many other CSS properties) only works with integer values. There's an issue on csswg-drafts for that:

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).

Essentially, this proposal was accepted, but it seems to be not implemented in browsers - yet. For example, the relevant Chromium issue (which, to be precise, is about inability to use calc division result as param of CSS Grid) has been opened just two weeks ago.

Upvotes: 3

Related Questions