Submitted almost 2 years ago

Results Summary Component

#bem#sass/scss

Lim Tangmeng•80

@ImFropZ

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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
}

Community feedback

Rashid Shamloo•570
@rashidshamlooPosted almost 2 years ago
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
1
PARKO001•190
@PARKO001Posted almost 2 years ago
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]
0

Please log in to post a comment

Join our Discord community

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