SCSS mixin 添加百分比失败答案

【问题标题】：SCSS mixin add percentage failsSCSS mixin 添加百分比失败
【发布时间】：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”

【问题讨论】：

标签： sass gulp-sass

【解决方案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 范围规则，它没有任何意义。

【讨论】：