CODEWITHSUNDEEP
csssass
Bice
Bice

Reputation: 149

Using CSS custom property in SCSS hsla() function

Any reason why this isn't working?

:root {
--color-white: 0 0% 100%;
}

color: hsla(var(--color-white) 1);

I'm getting: SCSS processing failed: file "_page.scss", line 5, col 16: Function hsla is missing argument $saturation.

I also tried

color: #{hsla(var(--color-white) 1)};

which still does not work.

Upvotes: 2

Views: 2375

Answers (4)

Aleks Grunwald
Aleks Grunwald

Reputation: 385

Please, add commas between --color-white's percentages and after passing the var (before '1' in color). This solution should work:

:root {
 --color-white:  0, 0%, 100%;
}

color: hsla(var(--color-white), 1);

It looks like rgb() works without commas, but hsla() needs commas. See here: http://codepen.io/Aleksgrunwald/pen/abpQQrr

Upvotes: 0

Martin
Martin

Reputation: 6172

SASS attempts to compile the styles with a SASS-specific hsla() function. However, hsla() is also a native CSS function, so you can use string interpolation to bypass the SASS function.

:root {
  --color-white: 0 0% 100%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    color: hsla(var(--color-white) 1);
    
    /* This is valid scss, and will generate the CSS above */
    color: #{'hsla(var(--color-white) 1)'};
}

Taken from this answer on SO.

Upvotes: 1

Rolando Yera
Rolando Yera

Reputation: 878

hsla() takes four inputs and the punctuation needs to be accurate or none of it will work. No hash tags are needed:

  --color: 0, 100%, 50%;
    color: hsla(var(--color), 1);

This 100% works (pun intended).

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273969

Try like below. You need comma with hsla() using the old syntax

:root {
--color-white: 0, 0%, 100%;
}

.box {
  color: hsla(#{var(--color-white), 1});
}

Or use the new syntax where you need / before the alpha

:root {
--color-white: 0 0% 100%;
}

.box {
  color: hsl(#{var(--color-white) / 100%});
}

Reference: https://www.w3.org/TR/css-color-4/#the-hsl-notation

Upvotes: 1

Related Questions