手写笔 mixin 以在同名的嵌套类中替代规则？

Question

什么是平滑的手写笔（或 sass）混合以替代同名嵌套类中的规则？

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

我尝试了一些无济于事的方法，然后又回到嵌套 10 层以避免浪费时间...但是 - 我相信有人知道答案。

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

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

回答了！来自@blonfu：这里是 a CodePen 示例

Answer 1

终于找到解决办法了。问题是防止在循环的每次迭代中重复整个选择器，我只需要重复 .ember-view 选择器并使用一些奇怪的代码来实现它。希望对你有用:

手写笔

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输出

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

手写笔 mixin 以在同名的嵌套类中替代规则？

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

stylus

手写笔 mixin 以在同名的嵌套 类 中替代规则？

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

stylus

手写笔 mixin 以在同名的嵌套类中替代规则？