All comments

• 

  Lim Tangmeng• 80

  @ImFropZ

  Submitted about 1 year 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

  2

  0

  

  Rashid Shamloo• 570

  @rashidshamloo

  Posted about 1 year 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