#sass
#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:
Sass дал вам ответ: вы используете строки, когда не должны (обратите внимание на кавычки в ошибке, это верный признак строки). Интерполяция всегда выдает строку, несмотря ни на что. Поскольку hsla()
ожидается, что все аргументы будут числами, передача ему строки приводит к получению строки hsla()
вместо цветового представления Sass для hsla()
, и lighten()
функция может принимать только цвета.
Так что просто перестаньте давать ему строку:
.foo {
background: hsla(60, 1, ($base - $math), 1);
}