在 Sass 中，如何输出 % 符号 [重复]

Question

我正在尝试使用 for 循环创建一系列 CSS 选择器：

@for $i from 1 through 3 {
  .bottom-#{$i} {
    bottom: #{$i}%;
  }
}

我想要一个如下所示的输出：

.bottom-1 { bottom: 1%  }
.bottom-2 { bottom: 2%  }
.bottom-3 { bottom: 3%  }

但 SASS 不喜欢 % 符号 - 它正在尝试评估语句。我假设有办法逃脱这样的角色，但我找不到它。

有什么想法吗？

谢谢

Answer 1

您可以使用percentage()函数将数字转换为百分比，然后除以100：

@for $i from 1 through 3 {
  .bottom-#{$i} {
    bottom: percentage($i / 100);
  }
}