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

Posted 2023-03-06

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

【英文标题】：Mathematical Calculations In .SCSS file Angular CLI Is not Working

【发布时间】：2019-07-05 22:50:56

【问题描述】：

我不太了解 .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 并且不进行任何计算。

【问题讨论】：

你想让前两个元素是红色然后是绿色吗？

@TusharKumawat，不，我正在寻找通用解决方案。我可以通过硬编码来做到这一点。

【参考方案1】：

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

更改以下行

$modular: #$value%2;

到

$modular: #$value%2;

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

【讨论】：

我已经尝试过了，但它不适用于 Angular CLI。

变量现在打印什么。

它给出编译错误 - $modular: #$value%2; ^ 未定义操作：“0 mod 2”。

能否请您在此处添加修改后的代码，以便我更好地理解。

【参考方案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上看到输出。

【讨论】：

我已经尝试过了，但它不适用于 Angular CLI。

编译错误 - $modular: $value % 2; ^ 未定义操作：“0 mod 2”。

暗示细节是“插值返回不能用于任何进一步数学运算的未引用字符串”，来自：sass-lang.com/documentation/interpolation