Order Summary Component with Flexbox

Hello,

Another challenge done. Something I did learn is that hsl(value, value%, value%, 1) can take a 4th value for opacity. I usually converted hsl value to rgba.

For the purple ish active color and box shadow, I took the bright-blue color and reduced opacity. But because bright-blue hsl values were duplicated 3 times in my code I wanted to dry(don't repeat yourself) it up.

Wrote a sass function but didn't work when I applied it to a custom property. No errors. If anyone has any thoughts on it?

@function brightBlue($opacity: null) {
  @if ($opacity) {
    @return hsl(245, 75%, 52%, $opacity);
  } @else {
    @return hsl(245, 75%, 52%);
  }
}
:root {
    --bright-blue: brightBlue();
}

Happy coding!!