Question

在嵌套SCSS中使用nth-child时，有没有办法不重复剪辑项类？输出应该在下面的CSS中。

CSS

.clip-item .group-left {
  padding: 0;
}
.clip-item .group-left:nth-child(2n+1) {
  background: blue;
}
.clip-item .group-left:nth-child(2n+2) {
  background: gray;
}
.clip-item .group-right {
  padding: 0;
}
.clip-item .group-right:nth-child(2n+1) {
  background: blue;
}
.clip-item .group-right:nth-child(2n+2) {
  background: gray;
}

我试图像下面那样做。即使工作正常，我也不认为这是正确的方式/清洁方式。

SCSS

.group-left {
  .clip-item & {
    padding: 0;
  }
  .clip-item:nth-child(2n+1) & {
    background: blue;
  }
  .clip-item:nth-child(2n+2) & {
    background: gray;
  }
}

.group-right {
  .clip-item & {
    padding: 0;
  }
  .clip-item:nth-child(2n+1) & {
    background: blue;
  }
  .clip-item:nth-child(2n+2) & {
    background: gray;
  }
}

我也在某些内容中使用.group-left和.group-right类，这就是我将它用作父选择器的原因。

编辑： - 每个组包装器都包含在一个剪辑项div中。以下是我的标记： -

<div class="clip-item">
  <div class="group-left">
  <div class="group-right">
</div>

<div class="clip-item">
  <div class="group-left">
  <div class="group-right">
</div>

Answer 1

如果您需要以这种方式对选择器进行分组 - 我建议使用@at-root directive.

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

.group-left {
  .clip-item & {
    padding: 0;
  }
  @at-root .clip-item &:nth-child(2n+1) {
    background: blue;
  }
  @at-root .clip-item &:nth-child(2n+2) {
    background: gray;
  }
}

.group-right {
  .clip-item & {
    padding: 0;
  }
  @at-root .clip-item &:nth-child(2n+1) {
    background: blue;
  }
  @at-root .clip-item &:nth-child(2n+2) {
    background: gray;
  }
}

Codepen demo（查看已编译的CSS）

此外，this CSS-tricks post可能有所帮助：

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

顺便说一下：

尽管它正在发挥作用，但我认为这不是正确的方法

实际上，您的SCSS当前没有生成所请求的CSS。

如何在嵌套选择器中选择SASS中的nth-child

1 个答案: