SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla'

Question

I\'m trying to loop a set amount of times gradually decreasing the lightness value of hsla but when I run the loop I get an error $lightness: \"96.77419\" is not a num

Answer 1

Sass gave you the answer: you're using strings when you shouldn't be (note the quotations in the error, that's a sure sign of a string). Interpolation gives you a string all the time no matter what. Because hsla() expects all arguments to be numbers, passing it a string results in getting the string hsla() instead of the Sass color representation for hsla(), and the lighten() function can only accept colors.

So just stop giving it a string:

.foo {
    background: hsla(60, 1, ($base - $math), 1);
}