0

I am trying to write a mixin that will take the HEX color code and convert it to HSL. Every time the code is compiled it gives an error. tried to use @return to pass the variable but that also not working. help me fix the code.

Thanks in advance.

Error:

Compilation Error
Error: Undefined variable.
   ╷
43 │         $hue : $hue * 60;
   │                ^^^^
   ╵

code inside _mixin.scss:

@mixin hex-to-hsl($hex) {
    $red:   red($hex);
    $green: green($hex);
    $blue:  blue($hex);
  
    $max: max($red, $green, $blue);
    $min: min($red, $green, $blue);

    $delta: calc($max - $min);

    $lightness: calc(($max + $min) / 2);
    
    @if ($delta == 0) {
        $hue: 0;
        $saturation: 0;
    } @else {
        @if ($lightness < 0.5) {
            $saturation : calc($delta / ($max + $min));
        } @else {
            $saturation : calc($delta / (2 - $max - $min));
        }

        @if ($red == $max) {
            $hue : calc(($green - $blue) / $delta);
        } @else if ($green == $max) {
            $hue : calc(2 + ($blue - $red) / $delta);
        } @else {
            $hue : calc(4 + ($red - $green) / $delta);
            
        }
        
        $hue : $hue * 60;
        @if ($hue < 0) {
            $hue : calc($hue + 360);
        }
          
    }
    color: hsl($hue, $saturation * 100%, $lightness * 100%);
}
  

code in main.scss

$main-color: #4F6D7A;

.text3 {
    @include hex-to-hsl($main-color);
}

0 Answers0