How do you change from a variable that has HSL color as a value to HSLA color in CSS?
:root {
--clr-red: hsl(0, 100%, 50%);
}
main {
background-color: hsla(var(--clr-red), 0.5); -- not work
}
@rashidshamloo
Posted
There is no native function to do that in CSS. but in SASS/SCSS you can use the "rgba" function to add alpha to a color variable:
$clr-red: hsl(0, 100%, 50%);
main {
background-color: rgba($clr-red, 0.5);
}
To see a list of other SASS color functions click here
Marked as helpful
@PARKO001
Posted
background-color: hsla(0, 100%, 50%, 0.5); --->this will work
[ 1. you have to add "a" at the end of "hsl" to make it "hsla". 2. add comma(,) and 0.5 inside the main hsl bracket at the extreme right]
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
