All comments

• 

  Lim Tangmeng•80

  @ImFropZSubmitted almost 2 years ago

  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
  }
  

  

  Results Summary Component

  #bem#sass/scss

  2

  20
  

  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