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

Question

我不太了解 .scss 语法。

我正在使用带有 .scss 扩展名的 Angular CLI。

我想根据条件返回背景颜色值。

@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};

让我知道你是怎么处理这件事的。

Answer 2

您的两个语句都不需要插值，因为您需要的是数字，而不是字符串。
此外，在这种情况下，您可以省略 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上看到输出。