Sass mixin 和带有百分比符号的循环打印 sassError: Expected identifier答案

【问题标题】：Sass mixin and loop with percentage symbol print a sassError: Expected identifierSass mixin 和带有百分比符号的循环打印 sassError: Expected identifier
【发布时间】：2021-11-04 03:56:13
【问题描述】：

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

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

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

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

替代方案： 将此符号添加到集合中（例如：$widthCollection: 25%, 50%）不是解决方案……它也失败了。

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

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

Althoguht 我找到了解决方案，我想检查一下是否有人知道更好的解决方案，或者 (%) 不被 sass 接受的原因。我正在使用类似的 mixin 进行旋转，其中包括 deg 没有任何问题。示例：

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

谢谢！

【问题讨论】：

我相信它试图解释符号，您可以使用#{'%'} 而不是%。或者简单地说：$widthValue * 1%

标签： loops sass percentage mixins

【解决方案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;
  }
}

谢谢！！

【讨论】：