css - 用于循环更新hsla亮度的SASS返回错误$ lightness:“96.77419”不是“hsla”的数字

我试图循环播放一段时间，逐渐降低hsla的亮度值，但是运行循环时出现错误$lightness: "96.77419" is not a number for hsla'。谁能告诉我我在哪里出错了或如何加以改进？

码

$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

萨斯迈斯特http://sassmeister.com/gist/e99733697e1b38b794fa

我真正想做的是能够逐渐增加颜色以制成阴影调色板，真的想要能够多次使用多次且数量不同等，所以如果您能给我一些其他建议来做，那就太好了。这个。

最佳答案

Sass给出了答案：不应该使用字符串（请注意错误中的引号，这是字符串的确定符号）。无论如何，插值始终为您提供一个字符串。因为hsla()期望所有参数都是数字，所以将其传递给字符串会导致获得字符串hsla()而不是hsla()的Sass颜色表示，并且lighten()函数只能接受颜色。

所以就停止给它一个字符串：

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