CSS variables and SASS functions

Question

We know the advantages of using CSS4 variables but what if we need to get these values from a SASS function like so?:

:root {
    --gap-l: toRem(10);
}

toRem is a Sass function that I call to get the sizes dynamically:

$fontSize: 16;
@function toRem($val) {
    @return $val / $fontSize * 1.6 + 0rem;
}

This won't fail but won't work either. To have this working we can just have the value directly on --gap-l or keep using SASS vars.

If I try something like --gap-l: #{toRem(10)}; this is the error I get:

It doesn't call the SASS function

There is nothing called "CSS4 variables", that's why I edited the question to make it "CSS variables" which is the correct term. — Temani Afif, Dec 17 '19 at 19:45
I always understood that was CSS4 variables: https://codepen.io/jakealbaugh/post/css4-variables-and-sass or https://github.com/ionic-team/ionic/issues/14801 — Dani, Dec 17 '19 at 22:28
those links are using wrong temrs. you will find noting about CSS4 variables in any official specification. Even CSS4 as term doesn't exist, check this: https://stackoverflow.com/a/54055521/8620333 — Temani Afif, Dec 17 '19 at 22:35
Ok, so it might be a misunderstanding about these terms on the internet then. Thanks for the clarification — Dani, Dec 17 '19 at 23:14

Terry · Answer 1 · 2019-12-17T12:06:33.523

3

You can definitely do that: what you're missing is simply using string interpolation, i.e.:

:root {
  --gap-l: #{toRem(10)};
}

The reason is highlighted in their "breaking changes" documentation with regards to CSS variables:

To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.

edited Dec 17 '19 at 12:06

answered Dec 17 '19 at 10:53

Terry

63,248
15
96
118

`--gap-l` is a css4 var which contains a value it's being used like `padding: var(--gap-l);` – Dani Dec 17 '19 at 11:41
@Dani Of course: and I don't see why my answer would be different. – Terry Dec 17 '19 at 12:06
Thanks! Got the error, I had to move as well the function before this css4 var – Dani Dec 17 '19 at 12:19
@TemaniAfif Sorry, I was in a bad mood and now I'm trying to delete the comment but can't find it. Thank you if you did. – Loi Nguyen Huynh Dec 17 '19 at 23:53

Loi Nguyen Huynh · Accepted Answer · 2019-12-17T12:05:59.250

1

Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works. Another example:

$padding: 5px;
.element {
  width: calc(100% - $padding); // will not work, it must be:
  width: calc(100% - #{$padding});
}

Here is the code with the updated question: https://jsfiddle.net/bcw763en/. Notice that if you put :root above the @function, it'll not work.

edited Dec 17 '19 at 12:05

answered Dec 17 '19 at 11:02

Loi Nguyen Huynh

8,492
2
29
52

@Dani Did you put `:root` above or below the function? – Loi Nguyen Huynh Dec 17 '19 at 12:03
@Dani try the jsfiddle snippet I gave above. You might put `:root` at the top of the file, and `@function` below it so it's not recognized. – Loi Nguyen Huynh Dec 17 '19 at 12:09
1

that was the error! The function was below the css var and apparently with these vars this doesn't work like that – Dani Dec 17 '19 at 12:18
1

happy it helped – Loi Nguyen Huynh Dec 17 '19 at 12:30

CSS variables and SASS functions

2 Answers2