Using result of scss function to initialize css custom property

Question

everyone!

I've got this files structure

_utils.scss
_variables.scss
styles.scss

in styles.scss I import every partial with:

@use "utils" as *;
@use "variables";
body {
  min-height: 100vh;
  background-color: var(--cl-primary);
  font-size: var(--fs-normal);
}

The content of _utils.scss is this:

@use "sass:math";
/// Converts PX to REM
/// @access public
/// @param {string} $size - Value to be converted in PX.
/// @returns {string} - Returns REM string.
/// @example font-size: rem(24px);
/// @returns font-size: 1.5rem;
@function toRem($size) {
  $remSize: math.div($size, 16px);
  @return #{$remSize}rem;
}

And the content of _variables.scss is this:

:root {
  --cl-primary: #3829e0;
  --cl-primary-tint: #e0e8ff;

  --fs-normal: toRem(32px);
}

Questions:

Why on the webpage the css custom property --fs-normal is evaluated to "toRem(32px)" instead of 2rem?

2nd question: what should I do in order to get --fs-normal to be evaluated to 2rem?

Thank you all!

EDIT: i tried to reproduce a given solution in a fiddle: https://jsfiddle.net/mihai3636/fcjspt1v/24/

EDIT2:

ANSWER:

Beside string interpolation I should have added this line inside _variables.scss:

@use "./utils" as *;

Please read the last comment from Invulner on the answer

So _variables.scss should look like this in order to work:

@use "./utils" as *;
:root {
  --cl-primary: #3829e0;
  --cl-primary-tint: #e0e8ff;

  --fs-normal: #{toRem(32px)};
}

Does this answer your question? Unable to set SCSS variable to CSS variable? — Martin
– Martin, Commented Apr 9, 2024 at 8:31
Not really. What helped me was both interpolation + importing the utils file inside my _variable.scss partial (check Invulner's last comment from his answer). What I mean is that a part of my fix is also found in the question linked by you, but the solutions / questions are different if you ask me. Before asking this quesiton I personally stumbled upon other answers mentioning interpolation, I tried it but it didn't work by itself. — Mihai
– Mihai, Commented Apr 9, 2024 at 19:02

Invulner · Accepted Answer · 2024-04-02 16:06:09Z

1

From the doc:

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.

So, without interpolation, the function call within a CSS custom property is treated as a string literal by SCSS and not executed. To make it work, you need to add interpolation with #{}:

--fs-normal: #{toRem(32px)};

answered Apr 2, 2024 at 16:06

Invulner

1,8351 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mihai Over a year ago

I already tried that but I get the same result, sorry I forgot to mention it. I am new to scss and I'm not really sure if I'm doing something else wrong. I'll try to wrap up a short live example.

Mihai Over a year ago

Check my main post, I posted a small fiddle at the end. Nothing seems to work.

Invulner Over a year ago

@Mihai Looks like jsFiddle doesn't support the newer Sass module system introduced in Dart Sass. Check this example, without math:sass. It's intended to verify that interpolation effectively passes the function result to a CSS variable.

Mihai Over a year ago

Thanks for fixing that jsFiddle. In my code I have the same things but it just does not understand the #{toRem(32px)}. Here is the code on my github repo, perhaps you could spot something which is obviously wrong: github.com/mihai3636/order-summary-component Also, I'm using VsCode Live Sass Compiler by Glenn Marks, do you think something could be wrong with that compiler?

Invulner Over a year ago

@Mihai From the documentation: @use makes variables, functions, and mixins available only within the scope of the current file and never adds them to the global scope. Therefore, simply add @use "./utils" as *; to the file where the utility is used.

|

Collectives™ on Stack Overflow

Using result of scss function to initialize css custom property

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related