前缀选择器作为父级和交集

Question

我知道标题不是很具有描述性，所以我将展示一个我需要的行为示例：

输入

@mixin superScopeMixin {
  /* ... */
}

.one {
  superScopeMixin {
    .two {
      .three {
        /* ... */
      }
    }
  }
}

输出

.one.two .three,
.one .two .three {
  /* ... */
}

我希望选择器的前缀为“带空格”和“不带空格”。这可能吗？我可以使用 Less、Sass 或 Stylus。 谢谢！

Answer 1

如果我正确理解你的问题，你可以像这样设置你的 mixin：

@mixin superScopeMixin {
  &.two, .two {
    color: #fff;
    .three {
      color: purple;
    }
  }
}

.one {
  color: gray;
  @include superScopeMixin
}

编译为：

.one {
  color: gray;
}
.one.two, .one .two {
  color: #fff;
}
.one.two .three, .one .two .three {
  color: purple;
}