Question

我正在尝试将mixin嵌套在一起以更新样式。但是我发现输出CSS似乎不是我期望的。

我想知道是否有任何方法可以将mixin嵌套在一起，并在右边使用＆号。

下面是一些示例代码和预期结果。

谢谢。

HTML：

<html class="classA">

  <div class="itemA">
    <div class="itemB">Item B</div>
  </div>

</html>

SCSS：

@mixin add-style-when-classA-exist() {
  .classA & {
    @content;
  }
}

@mixin add-style-when-classB-notExist() {
  html:not(.classB) & {
    @content;
  }
}

.itemB {
  color: blue;

  @include add-style-when-classB-notExist() {
      color: green;
  }

  @include add-style-when-classA-exist() {
    color: red;

    @include add-style-when-classB-notExist() {
      color: yellow;
    }
  }
}

实际CSS输出：

.itemB {
  color: blue;
}
html:not(.classB) .itemB {
  color: green;
}
.classA .itemB {
  color: red;
}
html:not(.classB) .classA .itemB {
  color: yellow;
}

预期的CSS输出：

.itemB {
  color: blue;
}
html:not(.classB) .itemB {
  color: green;
}
.classA .itemB {
  color: red;
}
html:not(.classB).classA .itemB {
  color: yellow;
}

编译的CSS失败，并带有＆符号的嵌套mixin

0 个答案: