防止在 SCSS/SASS 输出中嵌套 [重复]

Question

借助 SCSS 中的所有简洁功能，很容易让人忘乎所以并最终得到一些相当粗糙的 CSS。

以一个经典的嵌套老鼠巢为例-

.image {
    ...

    .imageWrapper {
        ...

        img {
            ...
        }
    }

    .textWrapper {
        ...

        title {
            ...
        }

        caption {
            ...
        }
    }
}

编译成

.image {
    ...
}

.image .imageWrapper {
    ...
}

.image .imageWrapper img {
    ...
}

.image .textWrapper {
    ...
}

.image .textWrapper .title {
    ...
}

.image .textWrapper .caption {
    ...
}

这不仅难以阅读，而且对处理器来说也是一个难题。

现在，我不喜欢使用不特定的类名（ 有多长？），所以嵌套对我来说几乎没有什么功能用处，但我发现它让我的 pre-编译的 SCSS 非常 可以理解 - 暗示元素与其父元素和子元素之间的关系的能力对于我自己和在我的代码中发生的下一个开发人员来说都是无价的。

有什么方法可以让我的 SCSS 嵌套在我的工作表的全部或（最好是）部分而不在我的 CSS 中呈现无穷无尽的子选择器？

Answer 1

我认为您正在寻找 @at-root 指令。

它的工作原理是“跳出”你在 Sass 中的嵌套位置，成为顶层。

例如，你可以这样做：

.image {
    color: #333;
    @at-root {
        .imageWrapper {
            color: #666;
            img {
                color: #999;
            }
        }
    }

    .stayNested {
        background-color: #555;
    }

    @at-root {
        .textWrapper {
            color: #aaa;
            title {
                color: #ccc;
            }
            caption {
                color: #fff;
            }
        }
    }
}

那会编译成这样：

.image {
  color: #333;
}
.imageWrapper {
  color: #666;
}
.imageWrapper img {
  color: #999;
}
.image .stayNested {
  background-color: #555;
}
.textWrapper {
  color: #aaa;
}
.textWrapper title {
  color: #ccc;
}
.textWrapper caption {
  color: #fff;
}

有关详细信息，请参阅official documentation