Question

我有这个混入功能：

@mixin doSomething() {

    .theme-x & {
        @content;
    }

}

.class-1 {

  color: 000;

 @include doSomething{

   color: ccc;

   &-element {
     color: #fff;
   }
 }; 
}

// Output
.class-1 {
  color: 0;
}
.theme-x .class-1 {
  color: ccc;
}
.theme-x .class-1-element {
  color: #fff;
}

我希望它改为输出：

.class-1 {
  color: 0;
}
.theme-x.class-1 {
  color: ccc;
}
.theme-x.class-1 .class-1-element {
  color: #fff;
}

注意区别：theme-x类与class-1在同一元素上。

这可能吗？

现实世界的情况是，我有一个主题混合，可以为几个不同的主题输出.theme-x，并且我希望能够创建基于父元素类名而不是主题类名的子元素。 ..

Answer 1

您需要反转混合符号中的＆符号和主题类，以为主要元素创建所需的选择器。要创建子元素选择器，您可以将main元素的类分配给变量，然后在传递给mixin的内容中使用它。

您还可以将主题名称传递给mixin，以使其可用于不同的主题。

请参见下面的示例。变量的使用比＆符要方便一些，但是确实可以。

@mixin themedWith($theme) {
  $c: & !global;
  &.#{$theme} {
    @content;
  }
}

.class-1 {
  color: blue;

  @include themedWith(theme-x) {
    color: purple;
  
    #{$c}-element {
      color: red;
    }
  }
}

// Output:

.class-1 {
  color: blue;
}
.class-1.theme-x {
  color: purple;
}
.class-1.theme-x .class-1-element {
  color: red;
}

希望有帮助。

类名的倒序

1 个答案: