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在同名的嵌套类中替换规则？

1 个答案: