Question

SCSS具有所有简洁的功能，很容易被带走并最终得到一些非常粗糙的CSS。

以一只经典的嵌套老鼠窝为例 -

.image {
    ...

    .imageWrapper {
        ...

        img {
            ...
        }
    }

    .textWrapper {
        ...

        title {
            ...
        }

        caption {
            ...
        }
    }
}

编译为

.image {
    ...
}

.image .imageWrapper {
    ...
}

.image .imageWrapper img {
    ...
}

.image .textWrapper {
    ...
}

.image .textWrapper .title {
    ...
}

.image .textWrapper .caption {
    ...
}

这不仅难以阅读，而且是处理器上的一个难题。

现在，我不是一个使用非特定类名的人（只是多长时间？）所以嵌套对我来说功能用处很少，但我发现它让我的预编译的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

防止在SCSS / SASS输出中嵌套

1 个答案: