Процент ширины SASS в цикле @for

Question

У меня есть еще один вопрос, на который я не могу ответить нигде.

В настоящее время работаю с командой, которой нужны пользовательские классы для стилизации своих элементов.Они хотели получить класс процентной ширины, который они могут надеть на что угодно, чтобы получить определенный процент ширины.

Я сделал это:

@for $i from 0 through 100 {
    .width-percentage-#{$i} {
        width: #{$i}% !important;
    }
}

Но IntelliJ выдает ошибку ..

Answer 1

Вы получаете эту ошибку, используя DartSass.Должна отображаться следующая ошибка:

Неопределенная операция "0%! Важный".

Я полагаю, DartSass пытается использовать % как математический оператор по модулю, что невозможно, поскольку !important не является числом (и $i интерполируется).Вам также нужно интерполировать % (#{"%"}):

@for $i from 0 through 100 {
    .width-percentage-#{$i} {
        width: #{$i}#{"%"} !important;
    }
}