SCSS mixin 添加百分比失败

Posted 2023-03-06

【中文标题】SCSS mixin 添加百分比失败

【英文标题】：SCSS mixin add percentage fails

【发布时间】：2016-11-08 10:31:46

【问题描述】：

我有一个 SCSS mixin，其 linear-gradient 的定义如下。

@mixin custom-background(
  $color: $color,
  $progress: 0
) 
  background: linear-gradient(to right, $color #$progress%, #9EC9DB 0);
  border: #10516C solid #9EC9DB;

但是在使用gulp-sass 编译时，它会出现以下错误：

错误：“... #$progress %”后的 CSS 无效：预期的表达式（例如 1px，粗体）是“，$progress-” 在 file.scss 的第 15 行

nt(向右, $color #$progress %, #9EC9DB 0); ------------------------------------------^

messageOriginal：“... #$progress %”后的 CSS 无效：预期的表达式（例如 1px、粗体）是“, $color”

【参考方案1】：

插值有不同的用途，例如从字符串变量创建选择器。不转换值。要将数字转换为百分比，只需将其乘以 100%。

@mixin custom-background(
  $color: $color,
  $progress: 0
) 
  background: linear-gradient(to right, $color $progress * 100%, #9EC9DB 0);
  border: #10516C solid #9EC9DB;

您可能想改用1% 或10000%（我不知道$progress 输入范围）。

另外：$color: $color 到底是什么？根据 SASS 范围规则，它没有任何意义。