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 вы можете создавать циклы и генерировать необходимое количество классов.

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 ;
    }
}

I 'Я уверен, что нет чистого решения CSS.