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.
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
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.
hsl(var(--color-white)/100%) is correct, what you want to get?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.
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).
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
