SASS to update the hsla lightness loop returns the $ lightness error: "96.77419" is not a number for `hsla '

Question

I try to loop a certain number of times, gradually decreasing the hsla brightness value, but when I start the loop, I get the error $lightness: "96.77419" is not a number for hsla'`. Can someone advise me where I am wrong and how it can be improved?

the code

 $iterations: 31; $base: 100; $math: $base / $iterations; li { background: #919190; height: 40px; line-height: 40px; color: #191919; text-align: center; } @for $i from 1 through $iterations { .options:nth-of-type(#{$i}) { background: hsla(60, 1, #{($base - $math)}, 1); } 

Codepen http://codepen.io/styler/pen/BHwjc

Sassmeister http://sassmeister.com/gist/e99733697e1b38b794fa

What I really want to do is the ability to gradually increase the color to make a palette of shades, really want to be able to use this several times with several different amounts, etc., so it would be great if you could give me additional advice , to do this.

Answer 1

Sass gave you the answer: you use strings when you shouldn't (note the quotes in the error, which are the true sign of the string). Interpolation gives you a string all the time no matter what. Since hsla() expects all arguments to be numbers, passing its string will result in the string hsla() instead of representing the Sass color for hsla() , and the lighten() function can only accept colors.

So just stop giving it a line:

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