Question

我有一个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进行编译时会出现以下错误：

错误：＆＃34之后的CSS无效; ...＃{$ progress}％＆＃34;：预期表达式（例如1px，粗体），是＆＃34;，$ progress - ＆＃34;           在file.scss第15行


nt（右，$ color＃{$ progress}％，＃9EC9DB 0）;        ------------------------------------------ ^


messageOriginal：＆＃34之后的无效CSS; ...＃{$ progress}％＆＃34;：预期表达式（例如1px，粗体），是＆＃34;，$ color＆＃34;

Answer 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范围规则，它没有任何意义。

SCSS mixin添加百分比失败

1 个答案: