SCSS中带!important变量运算及Material复选框尺寸覆盖问题

这个问题的核心是你混淆了SCSS变量的赋值逻辑和CSS !important优先级标记的用法——!important是用来提升CSS属性优先级的语法，它不属于变量值的一部分，直接给SCSS变量加上!important会让变量在参与数学运算时被解析成12vw !important这种带后缀的非标准数值，自然会触发运算错误。

正确的解决方案：利用Material SCSS的!default机制覆盖变量 #

Material Design的SCSS变量都是用!default定义的，这意味着你只需要在导入Material的SCSS文件之前定义你的变量，就能自动覆盖默认值，完全不需要加!important。

调整你的代码结构如下：

// 先定义你要覆盖的变量，不需要加!important
$mat-checkbox-size: 12vw;
$mat-checkbox-border-width: 0.5vw;
$mat-checkbox-transition-duration: 90ms;
$_mat-checkbox-ripple-radius: 2vw;

// 再导入Material的复选框SCSS文件
@import '~@angular/material/checkbox';

这样Material内部的$mat-checkbox-size: XX !default会自动使用你提前定义的12vw，后续的运算（比如$_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size）也能正常执行。

为什么之前单选按钮的修改可能"成功"？ #

大概率是巧合——比如单选按钮的变量运算逻辑没有直接引用带!important的变量，或者你当时的!important是加在了最终的CSS属性上而非变量上。但本质上给SCSS变量加!important是不符合语法规范的操作。

极端情况：如果必须强制使用带优先级的值 #

如果你的项目中存在其他地方已经覆盖了Material变量，必须强制提升优先级，那应该把变量值和!important分开处理：

// 定义不带!important的基础变量，用于运算
$mat-checkbox-size-base: 12vw;
// 定义带!important的变量，仅用于最终的CSS属性赋值
$mat-checkbox-size: $mat-checkbox-size-base !important;

// 运算时使用基础变量
$_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size-base !default;

不过这种情况非常少见，优先推荐第一种利用!default机制的方案。

内容的提问来源于stack exchange，提问作者serlingpa