CODEWITHSUNDEEP
stylus
sheriffderek
sheriffderek

Reputation: 9043

Stylus mixin to alternate rules in nested classes of the same name?

What would be a smooth stylus (or sass) mixin to alternate rules in nested classes of the same name?

.ember-view
  border: 1px solid red
  .ember-view
    border: 1px solid white
    .ember-view
      border: 1px solid blue
      .ember-view
        // repeat? options etc.

I've tried a few things to no avail and just went back to nesting 10 deep to avoid wasting time... however - I believe that someone out there has the answer.

alterate-border-color(a, b, c, ...)
  // logic
  // border-color: 1px solid n

.ember-view
  alternate-border-color('red', 'white', 'blue')


Answered! by @blonfu: here is a CodePen with an example

Upvotes: 0

Views: 82

Answers (1)

user4994625
user4994625

Reputation:

Finally I archieve a solution. The problem was prevent repeat the entire selector in each iteration of the loop, I just needed to repeat .ember-view selector and I use a little weird code to get that. I hope it is useful for you:

Stylus

alterate-border-color(colors...)
  $selector =  selector()
  for color in colors
    /{$selector}
      border-color: 1px solid color
    $selector = $selector + " " + selector()

.ember-view
  alterate-border-color(red , blue, yellow, green)

CSS output

.ember-view {
  border-color: 1px solid #f00;
}
.ember-view .ember-view {
  border-color: 1px solid #00f;
}
.ember-view .ember-view .ember-view {
  border-color: 1px solid #ff0;
}
.ember-view .ember-view .ember-view .ember-view {
  border-color: 1px solid #008000;
}

Upvotes: 1

Related Questions