使用 Sass 从课堂上取号答案

【问题标题】：Take number from class using Sass使用 Sass 从课堂上取号
【发布时间】：2018-03-31 14:43:54
【问题描述】：

拥有类名“class-name-X”（其中 X 可能是 0 到 9 之间的数字），我想为所有这些类创建一个特定的类，例如：

.class-name-{X} {
  height: {X} + 'px';
}

这可能吗？我知道使用数组，但这来自 JS 到 HTML，所以在 CSS 上我只得到类名

【问题讨论】：

再帮我们一些忙 - 确认您的代码块在 scss 中，并且您希望 sass 编译器在 css 文件中创建 10 个不同的类。
或许这个问题对你有帮助stackoverflow.com/questions/38591573/sass-loops-for-usage
Set a variable in SASS depending on the selector的可能重复
我的 scss 上根本没有代码。一切都由 JS 和 HTML 完成。第一个链接是使用数组。我知道那种方式，但正如我评论的那样，我有数组，html已经有了所有的变量。第二个链接是在不同的块上用颜色重复变量，这不是我要找的。我只想要一个街区

标签： css sass

【解决方案1】：

您可以使用@for 指令来遍历数字（例如在您的用例中为0 到9），并使用string interpolation 将当前索引作为类名的一部分注入，也可以注入width属性：

$start: 0;
$end: 9;

@for $i from $start through $end {
  .class-name--#{$i} {
    width: #{$i}px;
  }
}

请记住，SASS 是一种预编译语言，因此您需要对其进行编译，然后将生成的 CSS 用于您的页面；）

【讨论】：