Вопрос по css – Ошибка SASS при использовании% в значении свойства вместе с переменной цикла [duplicate]
На этот вопрос уже есть ответ:
Добавление единицы в число в Sass 2 ответаЯ пытаюсь написать SASS (.scss) для генерации CSS для барометра пожертвований (индикатор выполнения).
CSS, который мне нужен, выглядит примерно так:
.p-0:after {
left: 0%;
}
.p-1:after {
left: 1%;
}
[... up to 100]
У меня есть SASS:
@for $i from 0 through 100 {
.p-#{$i}:after {left: #{$i}%;}
}
Который дает мне эту ошибку:
Syntax error: Invalid CSS after "...r {left: #{$i}%": expected expression (e.g. 1px, bold), was ";}"
Странная вещь в том, что если я заменим «%» в вышеупомянутом SASS на «px», то SASS - это круто, но это не то, что мне нужно.
Может быть, это супер очевидно, но я довольно новичок в этом SASS.
1
ответ
@for $i from 0 through 100 {
.p-#{$i}:after {left: #{$i*1%};}
}
@ Eratox, пожалуйста. Если честно, я не очень хорошо знаю SASS, чтобы ответить на этот вопрос. Я могу только предположить, основываясь на том, что «SassScript поддерживает стандартные арифметические операции над числами (+, -, *, /,%) и будет автоматически конвертировать между единицами, если это возможно» из Sass-lang.com / документы / yardoc / .... Так что% - это оператор, и в некоторых случаях его нельзя просто добавить. Однако я не понял, почему бы не использовать что-то вроде:
\%
Mik
@ maxbeatty, спасибо за ваш комментарий. Я тоже думал об этом, но в этом случае скомпилированный CSS выглядит так:
.p-3:after {left: 3 * 1%; }
Mik
Спасибо @MikhailD, # {$ i * 1%} работает, но есть ли веская причина, почему px работает, но не%?
Eratox