控制基于父mixin

Question

这是两个mixins

@mixin parent {
  .parent & {
    @content;
  }
}

@mixin child($child) {
  .#{$child} & {
    @content;
  }
}

mixin都可以独立工作。

正在寻找的东西：

1. 孩子可以是独立的
2. 同样孩子 mixin可以包含在父中，但相反 不应该被允许。
3. 如果有人试图将父纳入孩子，则应该 是一些错误信息。
4. 在css输出.parent应该出现在.child 之前（请参阅下面的示例）

第4点示例：

.test {
  //some css properties
  @include parent {
    @include child(childboy) {
      color: red;
    }
  }
}

如您所见，这将提供以下输出

.childboy .parent .test {
  color: red;
}

正如您所见.parent课程正在.childboy之后。

如何在.parent

之前使.childboy课程成为现实

.parent .childboy .test {
  color: red;
}

是否可以使用scss ?? 请仅在scss中回答。

谢谢。

Answer 1

我认为你不能这样做。

结帐here：

  

.parent .childboy .test不允许您有选择地遍历嵌套   选择器树到某个地方并且只使用一小部分   您要使用的已编译父选择器。

如果我理解正确，您尝试使用SCSS执行此操作的原因是因为您希望将.test选择器分组到.test { @at-root .parent .childboy & { color: red; } } 根选择器中。

以下是使用SASS执行此操作的另一种方法：

&

<强> this CSS-tricks post

注意：尾随.test会向下追加选择器 - 这里只是{{1}}类

来自Codepen demo：

  

@ at-root指令导致一个或多个规则被发出   文档的根，而不是嵌套在父文件下面   选择器。