Sass 减轻功能问题

Question

好吧，我的 Sass 函数 lighten() 有问题，这是我的代码：

@for $i from 1 through 4{
    .par-#{$i}{
        background: lighten(#08725D, #{$i}0%);
        padding: 10px;
        border-radius: 5px;
    }
}

我认为我想要做的事情很明显，我只想通过那个变量并增加 bg 颜色的亮度（同时我增加类中的数字），但是我在控制台中有这个错误：

error main.scss（第 111 行：$amount: "10%" 不是 `lighten' 的数字）

我需要帮助。

Answer 1

$i 包含一个数字。继续使用它作为数字而不是使用连接：

@for $i from 1 through 4{
    .par-#{$i}{
        background: lighten(#08725D, $i * 10);
        padding: 10px;
        border-radius: 5px;
    }
}