CODEWITHSUNDEEP
csssass
CDT
CDT

Reputation: 10621

CSS/SCSS - value depends on selector

With an accordion each level having a incrementing margin as it goes deeper:

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

CSS:

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

Is there CSS/SCSS syntax like: 

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

Upvotes: 1

Views: 84

Answers (1)

Barthy
Barthy

Reputation: 3231

In SASS/SCSS you can create for loops and generate the necessary amount of classes.

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'm pretty sure there is no pure CSS solution.

Upvotes: 3

Related Questions