How to use functions in :root in SCSS for custom properties?

user_18826961 0
Viewed 69

I'm trying to generate custom properties in the :root using SCSS. I have a function called fluidClamp() that generates a clamp function for text sizes. It accepts a minimum value and a maximum value.

However, I can't get any functions to work in SCSS when they're used inside :root{}.

For example:

:root {
   --text-s: fluidClamp(1.4, 1.6);
   --text-m: fluidClamp(1.6,1.8);
}

It completely ignores the function, even though the function works everywhere else. What are my options?

sass root
1 Answers

You can't use function in your :root pseudo element.

To achive your goal, you need to declare in your :root the basic rules, like:

$text_s: 1.4;
$text_m: 1.6;

:root{ 
  --text-s: $text_s;
  --text-m: $text_m;
}

Then in your component you can call:

.myClass{
  font-size: fluidClamp(var(--text-s), var(--text-m))
}

Hope it help.

user_180101200
Related