Question

在下面的代码示例中，我生成两个理想情况下应该变为红色的正方形。

第一个div .with-root目前保持蓝色，第二个div .without-root变为红色。我期待这种行为，但是没有看到一个合适的解决方案来将.with-root div变为红色。

注意scss文件的不同之处：第一个div使用固定的父选择器，第二个div没有父选择器。对于CSS特异性，我需要使用.with-root {}包装器。

.with-root {
  .with-root__element {
    display: block;
    width: 5rem;
    height: 5rem;
    background: blue;
    &--red & {
      &__item {
        background: red;
      }   
    }
  }
}

.without-root {
  &__element {
    display: block;
    width: 5rem;
    height: 5rem;
    background: blue;
    &--red & {
      &__item {
        display: block;
        width: 5rem;
        height: 5rem;
        background: red;
      }   
    }
  }
}

可以在此处找到codepen：https://codepen.io/studiotwist/pen/OzMOmr

Answer 1

现在好了，我希望能够理解你的问题，之前我删除了错误的想法，以下解决方案应该有效。

也许可能存在逻辑错误。实际上，您有.with-root__element的三个类定义，其中两个使用--red和__item进行了扩展，但第三个类是与另外两个冲突的额外类。您基本上将结尾--red和__item与父选择器*__element连接起来。此外，--red类嵌套在*__element内，而不是以CSS结尾，但在HTML中却不是。 *__element和*__element--red附加在同一HTML标记中。

<强> DEBUG

仅显示第一个DIV。

.with-root {
  .with-root__element {
    display: block;
    width: 5rem;
    height: 5rem;
    background: blue;
    &--red {
      //@error &; // this reference contains the entire document root including the root element .with-root which is wrong
      #{&} &__item { 
        //@error #{&} &__item; // this is a wrong concatenation plus it takes the entire root with it
        background: red; // thus, this won't render
      }   
    }
  }
}

Debug in action @ Sassmeister

可能修正

@mixin bg($bg) {
  width: 5rem;
  height: 5rem;
  background: $bg;
}

.with-root__element {
  @include bg(blue);
  $this: &;
  @at-root {
    .with-root {
      #{$this}--red #{$this}__item {
        @include bg(red);
      }
    }
  }
}

.without-root {
  &__element {
    @include bg(blue);
    &--red &__item {
      @include bg(red);
    }   
  }
}

Fork

@at-root是一个对你的问题有用的指令，因为它基本上会裁剪选择器的嵌套级别，并且可以通过引用父选择器而不是整个根来定义根体内的样式。所以我添加了一个变量$this，它将缓存引用。由于div元素默认具有它，因此不需要display: block。抱歉，这是一个习惯。 --red和__item现在拥有refence选择器*__element。

@at-root Documentation

使用具有固定根类的sass parent（＆符号）选择器

1 个答案: