Вопрос по css – Ошибка SASS при использовании% в значении свойства вместе с переменной цикла [duplicate]

0

На этот вопрос уже есть ответ:

Добавление единицы в число в 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   ответ
0

@for $i from 0 through 100 {
  .p-#{$i}:after {left: #{$i*1%};}
}
@ Eratox, пожалуйста. Если честно, я не очень хорошо знаю SASS, чтобы ответить на этот вопрос. Я могу только предположить, основываясь на том, что «SassScript поддерживает стандартные арифметические операции над числами (+, -, *, /,%) и будет автоматически конвертировать между единицами, если это возможно» из Sass-lang.com / документы / yardoc / .... Так что% - это оператор, и в некоторых случаях его нельзя просто добавить. Однако я не понял, почему бы не использовать что-то вроде:\% Mik
Лучше делать математику вне интерполяции. Легче читать и меньше шансов на неправильную работу. Например, что если% интерпретируется как ruby как Модулю? #{$1} * 1% maxbeatty
@ maxbeatty, спасибо за ваш комментарий. Я тоже думал об этом, но в этом случае скомпилированный CSS выглядит так:.p-3:after {left: 3 * 1%; } Mik
Спасибо @MikhailD, # {$ i * 1%} работает, но есть ли веская причина, почему px работает, но не%? Eratox

Похожие вопросы