Блог

Я пытаюсь выполнить цикл заданное количество раз, постепенно уменьшая значение яркости 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

Что я действительно хочу сделать, так это иметь возможность постепенно увеличивать цвет для создания палитры оттенков, действительно хочу иметь возможность использовать это несколько раз с несколькими разными суммами и т. Д. Поэтому было бы здорово, если бы вы могли дать мне несколько дополнительных советов, чтобы сделать это.

Sass дал вам ответ: вы используете строки, когда не должны (обратите внимание на кавычки в ошибке, это верный признак строки). Интерполяция всегда выдает строку, несмотря ни на что. Поскольку hsla() ожидается, что все аргументы будут числами, передача ему строки приводит к получению строки hsla() вместо цветового представления Sass для hsla() , и lighten() функция может принимать только цвета.

Так что просто перестаньте давать ему строку:

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