css - 使用 Sass 从类中获取数字

Question

类名为“class-name-X”(其中 X 可能是 0 到 9 之间的数字)，我想为所有类创建一个特定的类，例如:

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

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

Answer 1

您可以使用 @for指令遍历数字(在您的用例中说 0 到 9)，并使用 string interpolation将当前索引作为类名的一部分注入(inject)，同时注入(inject) width 属性:

$start: 0;
$end: 9;

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

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