css - SASS for loop updating hsla lightness returns error $lightness: "96.77419" is not a number for `hsla' -

i'm trying loop set amount of times gradually decreasing lightness value of hsla when run loop error $lightness: "96.77419" not number forhsla'`. can advise me i'm going wrong or how can improved?

code

$iterations: 31; $base: 100; $math: $base / $iterations;  li {   background: #919190;   height: 40px;   line-height: 40px;   color: #191919;   text-align: center; }  @for $i 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 want able gradually increase colour make shade palette, want able use multiple times multiple different amounts etc great if give me additional advice make this.

sass gave answer: you're using strings when shouldn't (note quotations in error, that's sure sign of string). interpolation gives string time no matter what. because hsla() expects arguments numbers, passing string results in getting string hsla() instead of sass color representation hsla(), , lighten() function can accept colors.

so stop giving string:

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