Математические вычисления в файле .SCSS Угловой интерфейс командной строки не работает

Question

Я не очень осведомлен о синтаксисе .scss.

Я использую угловой интерфейс командной строки с расширением .scss для css.

Я хочу вернуть значение фонового цвета на основе условий,

@function getBgColor($value) {
    $modular: #{$value}%2;
    @debug $modular;
    @if($modular == 0) { 
        @return red;
    } @else {
        @return green;
    }
};

@for $i from 0 through 25 {
    .mat-column-#{$i} {
        max-width: 178px;
        margin-right: 10px;
        background-color: getBgColor(#{$i})
    }
}

Работает нормально, если я пытаюсь напечатать 2% 2 без имени переменной.

В случае переменной (в моем случае $ value) просто напечатайте 1% 2, 2% 2, 3% 2 ... 25% 2 и не выполнять никаких расчетов.

Answer 1

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

Следующий коддолжен делать то, что вам нужно:

@function getBgColor($value) {
    $modular: $value % 2;
    @if($modular == 0) { 
        @return red;
    }
    @return green;
};

@for $i from 0 through 25 {
    .mat-column-#{$i} {
        max-width: 178px;
        margin-right: 10px;
        background-color: getBgColor($i)
    }
}

Вы можете увидеть вывод на SassMeister .

Answer 2

Вы пытаетесь выполнить математическую операцию над интерполированным значением.

Измените следующую строку

$modular: #{$value}%2;

на

$modular: #{$value%2};

Дайте мне знать, как вы справляетесь с этим.