Проблема с функцией освещения Sass

Ну, у меня проблема с функцией 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")

Мне нужна помощь, пожалуйста.

1 ответ

$i содержит число. Продолжайте использовать его как число вместо использования конкатенации:

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

licensed under cc by-sa 3.0 with attribution.