Can't use var() or @var() inside Math functions

[martitv]

for example:

--t: calc(3/2);
--tt: calc(@ceil(var(--t))*4); #Problem here!
margin: calc(.1em * var(--tt));

Doesn't work.

[yuanchuan]

Currently css-doodle lacks a way to read custom properties

[martitv]

Alright. Is this feature on the horizon?

[yuanchuan]

Yeah, I can see it's quite useful sometimes. Will be added soon!

[martitv]

Ok, nice.
Is this the reason it's not possible to use functions inside things like @Keyframes aswell? e.g.

@keyframes test {
    0% {
      background: transparent;
    }
    calc(50%+@index()) {
      background: black;
    }
}

Would also be really cool to have.

[yuanchuan]

Not quite.. but it's nice to have dynamic values inside keyframes too :)

[yuanchuan]

5 years later..

Since 0.37.0, the new symbol $ is added for reading numeric variables.

--t: calc(3/2);
--tt: calc(@ceil(var(--t))*4); #Problem here!
margin: calc(.1em * var(--tt));

Can be written as:

--t: $(3/2);
--tt: $(ceil(4 * t); 
margin: $em(.1 * tt);