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);
}