Question

我正在尝试清理我之前编写的一些SCSS代码，那时我并不真正在乎冗余代码，所以我写了这样的东西：

.example {
  .child {
    .grandchild {
      //CSS CODE
    }
  }
  &:nth-child(odd) {
    .child {
      .grandchild {
        //CSS CODE
      }
    }
  }
}

现在，我正在重构一些代码，而我正在尝试执行以下操作：

.example {
  .child {
    .grandchild {
      //CSS CODE
      &:nth-child(odd) & {
        //CSS CODE
      }
    }
  }
}

编译成这样的东西：

.example .child .grandchild:nth-child(odd) .example .child .grandchild

但是我想要的是这个

.example:nth-child(odd) .child .grandchild

使用SCSS可以做到这一点，还是应该坚持以前的代码？

Answer 1

在规则的中间插入新修饰符并不是Sass的功能。通常，您只能将内容添加到开头或结尾。另外，@at-root指令使您可以“重置”当前上下文。

因此，您始终必须组织代码，以便“块化”片段，以便在开头或结尾处插入。

所以类似的事情可能会起作用：

.example {
  color: yellow;

  @at-root {
    .child {
      .grandchild {
        .example & {
          color: red;
        }

        .example:nth-child(odd) & {
          color: blue;
        }
      }
    }
  }
}

编译为：

.example {
  color: yellow;
}
.example .child .grandchild {
  color: red;
}
.example:nth-child(odd) .child .grandchild {
  color: blue;
}

是否可以在SASS中将＆：after添加到父级？

1 个答案: