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

问题描述

我试图循环设置的次数逐渐减少hsla的亮度值，但是当我运行循环，我得到一个错误 $ lightness：96.77419不是一个数字 hsla'`。任何人都可以告诉我我在哪里出错或如何改进？

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?

代码

$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

Sassmeister

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

我真正想要的做的是能够逐渐增加颜色，使一个阴影调色板，真正想要能够使用这个多次与多个不同的金额等，所以这将是巨大的，如果你可以给我一些额外的建议，使这个。 p>


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.

推荐答案

Sass给了你答案：当你不应该使用字符串（注意错误中的引号，确定字符串的符号）。插值给你一个字符串所有的时间，无论什么。因为 hsla（）期望所有参数都是数字，所以传递一个字符串导致获得字符串 hsla（） hsla（）的Sass颜色表示， lighten（）函数只能接受颜色。

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

这篇关于SASS用于循环更新hsla亮度返回错误$ lightness：“96.77419”不是'hsla'的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！