CSS / SCSS-值取决于选择器

Question

随着手风琴的深入，每个级别的边际递增：

Level 1A
  Level 2
    Level 3
      Level 4
Level 1B
...

CSS：

.level1 {
  margin: 1em;
}
.level2 {
  margin: 3em;
}
.level3 {
  margin: 5em;
}
...

是否有CSS / SCSS语法，如：

.level[n] {
  margin: (2n-1)em
}

Answer 1

在SASS / SCSS中，您可以创建for循环并生成必要数量的类。

SASS：

@for $i from 1 through 4
  .level#{$i}
    margin: (2 * $i - 1) * 1em

SCSS：

@for $i from 1 through 4 {
    .level#{$i} {
        margin: (2 * $i - 1) * 1em ;
    }
}

我很确定没有纯CSS解决方案。