css - .SCSS 文件中的数学计算 Angular CLI 不起作用

Question

我不太了解 .scss 语法。

我正在使用 Angular CLI 和 .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

您正在尝试对插值执行数学运算。

更改以下行

$modular: #{$value}%2;

至

$modular: #{$value%2};

让我知道你对此的态度。