用于循环更新 hsla 亮度的 SASS 返回错误 $lightness: "96.77419" is not a number for `hsla'答案

【问题标题】：SASS for loop updating hsla lightness returns error $lightness: "96.77419" is not a number for `hsla'用于循环更新 hsla 亮度的 SASS 返回错误 $lightness: "96.77419" is not a number for `hsla'
【发布时间】：2014-08-10 07:55:32
【问题描述】：

我正在尝试循环一定次数，逐渐降低 hsla 的亮度值，但是当我运行循环时，我收到错误 $lightness: "96.77419" is not a number forhsla'`。谁能告诉我我哪里出了问题或如何改进？

代码

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

代码笔http://codepen.io/styler/pen/BHwjc

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

我真正想做的是能够逐渐增加颜色来制作一个阴影调色板，真的希望能够多次使用这个不同的数量等等，所以如果你能给我一些额外的东西那就太好了建议这样做。

【问题讨论】：

标签： css sass

【解决方案1】：

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

所以不要再给它一个字符串了：

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

【讨论】：