CSS4 variables not working with functions

[rraziel]

Hello,

Not sure whether this has been reported (or whether it's not supposed to work by design) but the following:

@function testfunc($x) {
    @return $x;
}

body {
    --test: testfunc(42);
    -test: testfunc(42);
    test: testfunc(42);
}

Turns into the following CSS:

body {
    --test: testfunc(42);
    -test: 42;
    test: 42;
}

Is there any reason why the CSS variable one does not work?

[rraziel]

Hm nevermind just found this: sass/libsass#2621 and the following indeed works:

body {
    --test: #{testfunc(42)};
}

[nex3]

Check out this blog post if you're interested in learning why interpolation is required here.

[rraziel]

Thanks, that makes a lot of sense (and I assume I won't be the last one to run into this).