Sass mixin and loop with percentage symbol print a sassError: Expected identifier

Question

我正在尝试为 widths 生成一个简单的 sass mixin。这可能是预期的结果：

.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}

问题： 似乎 Sass 不接受以下 mixin 的百分比符号 (%)：

$widthCollection: 50, 100;
@each $widthValue in $widthCollection {
  .width-#{$widthValue} {
    width: #{$widthValue}%;
  }
}

备选方案： 将此符号添加到集合 (p.e: $widthCollection: 25%, 50%) 不是解决方案...它也失败了。

但是！您可以像这样将符号作为变量传递：

$widthCollection: 25, 50, 75, 100;
$symbol: '%';
@each $widthValue in $widthCollection {
  .width-#{$widthValue} {
    width: #{$widthValue}+$symbol;
  }
}

虽然我已经找到了解决方案，但我想看看是否有人知道更好的解决方案或者 sass 不接受 (%) 的原因。我正在使用类似的 mixin 进行轮换，其中包括 deg 没有任何问题。示例：

$degrees: 0, 45, 90, 180;
@each $degree in $degrees {
  .rotate-#{$degree} {
    transform: rotate(#{$degree}deg);
  }
}

谢谢！

Answer 1

只是给出一个解决方案...两种选择都非常有效：

选项 1

由@Amaury Hanser 提供

$widthCollection: 25, 50, 75, 100;
@each $widthValue in $widthCollection {
  .width-#{$widthValue} {
    width: #{$widthValue}#{'%'};
  }
}

备选方案 2

问题给出

$widthCollection: 25, 50, 75, 100;
$symbol: '%';
@each $widthValue in $widthCollection {
  .width-#{$widthValue} {
    width: #{$widthValue}+$symbol;
  }
}

谢谢！！

Sass mixin and loop with percentage symbol print a sassError: Expected identifier

Sass mixin and loop with percentage symbol print a sassError: Expected identifier

loops

sass

mixins

percentage