2

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.

Bice
  • 149
  • 12
  • Might this be caused by a name clash between the [CSS native hsla function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla()) and the [SASS global hsla function](https://sass-lang.com/documentation/modules#global-functions)? There is a way to differentiate between them but I can't recall how. – Martin Apr 22 '21 at 08:19
  • Just to clarify: you mean to use the css native runtime function, right? Because the sass compile step can't possibly interpret css custom vars (as their values are determined during runtime and depend on element nesting). – Martin Apr 22 '21 at 08:25
  • I found the fix to the name clash, added below as answer. – Martin Apr 22 '21 at 08:44

4 Answers4

1

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for the note on the new syntax and using hsl() over hsla() (I want to stay current). However, using `color: hsl(#{var(--color-white) / 100%});` still gives me `SCSS processing failed: file "_page.scss", line 6, col 16: Function hsl is missing argument $saturation.` – Bice Apr 22 '21 at 01:14
  • @Bice maybe check the compiler version. Try the code here: https://www.sassmeister.com/ and it will work fine – Temani Afif Apr 22 '21 at 01:17
  • This shows it's still not working from sassmeister (gist saved from sassmeister): https://gist.github.com/bradryanbice/259b97822d1098c1b8436bf22d732b03 – Bice Apr 22 '21 at 02:44
  • @Bice from what you are showing me, it seems to work fine. the output `hsl(var(--color-white)/100%)` is correct, what you want to get? – Temani Afif Apr 22 '21 at 09:55
  • 1
    It ended up being my compiler version. I switched to a newer version of Dart Sass and all is fixed. Thank you! – Bice Apr 22 '21 at 16:52
  • The code compiles without errors, but it doesn't display properly on Chrome or Firefox. While debugging on the browser, I noticed that the rule was applied. However, upon checking the computed section, it appears that the effect is not being applied as expected. Seems like it's a valid CSS rule but browsers don't support it. – Ferit May 04 '23 at 12:41
1

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.

Martin
  • 5,714
  • 2
  • 21
  • 41
0

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).

Rolando Yera
  • 820
  • 4
  • 12
0

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

Aleks Grunwald
  • 315
  • 3
  • 12
  • Commas are not needed in hsl() or hsla() for newer browsers. – Bice Apr 22 '21 at 01:11
  • hmm.. I checked in two online editors (Codepen) and rgb() works without commas, but hsla() needs commas. https://codepen.io/Aleksgrunwald/pen/abpQQrr – Aleks Grunwald Apr 22 '21 at 08:58