时间戳

首页 > 解决方案 > 是否可以将 &:after 添加到 SASS 中的父级？

css - 是否可以将 &:after 添加到 SASS 中的父级？

问题描述

我正在尝试清理我之前编写的一些 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 或我应该坚持我以前的代码？

标签： csssass

解决方案

在规则中间插入新的修饰符并不是 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;
}

推荐阅读