SASS for循环更新hsla lightness返回错误$ lightness:“96.77419”不是`hsla'的数字

时间:2014-06-19 17:03:06

标签: css sass

我试图循环设定的次数逐渐减少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

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

我真正想做的是能够逐渐增加颜色以制作阴影调色板,真的希望能够多次使用多次不同的数量等等,所以如果你能给我一些额外的话会很棒建议做到这一点。

1 个答案:

答案 0 :(得分:2)

Sass给了你答案:当你不应该使用字符串时(请注意错误中的引号,这是字符串的确定标志)。无论如何,插值都会给你一个字符串。因为hsla()期望所有参数都是数字,所以传递一个字符串会导致获得字符串hsla()而不是hsla()的Sass颜色表示,而lighten()函数只能接受颜色。

所以只需停止给它一个字符串:

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