css - 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 number forhsla'`. Can anyone advise me where I'm going wrong with this or how it can be improved?

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 be able to gradually increase the colour to make a shade palette, really want to be able to use this multiple times with multiple different amounts etc so it would be great if you could give me some additional advice to make this.

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