为什么 SASS 会产生这么多 CSS 规则？答案

【问题标题】：Why is SASS producing so many CSS rules?为什么 SASS 会产生这么多 CSS 规则？
【发布时间】：2014-08-30 04:27:22
【问题描述】：

我在 SASS 文件中编写我的 CSS 并使用 CodeKit 将其编译成 CSS 文档。我一直对 SASS 究竟是如何编译我的 CSS 规则感到困惑，特别是当我试图追踪似乎没有相应 SASS 规则的已编译 CSS 规则时。

我有一个带有以下规则的 SASS 文件，它不是嵌套的：

.interviewprep .products .module img {
        float: left;
        margin: 0 1em 0 0;
        width: 10em;
}

但是当我查看我编译的 css 文件并搜索“.interviewprep .products .module img”时，我发现了这个巨大的 css 规则：

.interviewprep .products .module img,.interviewprep .products .bluemodule img
.interviewprep .products .page-template-page-1col-php .customersspeak .speak_small p img,
.page-template-page-1col-php .customersspeak .speak_small .interviewprep .products p img,
.interviewprep .products .videowidget img, .interviewprep .products .page-id-2310
.pricebox img, .page-id-2310 .interviewprep .products .pricebox img, .interviewprep     
.products .page-id-2406 .pricebox img, .page-id-2406 .interviewprep .products .pricebox 
img, ..interviewprep .products .excel a[title="pdf"] img, .excel .interviewprep .products 
a[title="pdf"] img, .interviewprep .products .excel a[title="pdf2"] img,
.excel .interviewprep .products a[title="pdf2"] img, .interviewprep .products div.wpcf7 
img, .interviewprep .products .mycourses form img, .mycourses .interviewprep .products 
form img {
   float: left;
   margin: 0 1em 0 0;
   width: 10em; 
}

现在，起初我想，编译过程是否足够聪明，可以在我的 sass 文档中找到所有使用 3 条规则的规则：

float: left;
margin: 0 1em 0 0;
width: 10em;

并将它们全部放在输出的 css 中？但事实并非如此。当我搜索“边距：0 1em 0 0;”时在我的 SASS 和 CSS 文件中，唯一使用该规则的元素是我的 SASS 文件中的非嵌套规则（如上）“.interviewprep .products .module img”

对我来说更令人困惑的是，除了“.interviewprep .products .module img”的第一个元素之外，我编译的 css 中那条巨大的行中的这些元素都没有写在我的 SASS 文件中的任何位置。它们都不是以非嵌套格式编写的，也没有任何嵌套元素的组合会产生这些“编译”元素。

例如，在我的 SASS 文件中，没有任何地方是来自巨型 css 行的第二个元素：“.interviewprep .products .bluemodule img”

在非嵌套格式中找不到该规则，也没有任何嵌套格式的组合会产生该规则，如下所示：

.interviewprep .prouducts {
    .bluemodule {
        img {
        }
     }
}

那么所有这些规则可能来自哪里？我已经做了很多来回尝试追踪所有这些规则——我的 css 文件充满了它们。我已经消除了大量不必要的嵌套，但我的 css 中仍然有太多规则。

【问题讨论】：

我无法重现这个问题。 sassmeister.com/gist/8800f9e4144f96feadc5 您需要提供MCVE 以便我们为您提供帮助。
您是否尝试过在打开line_numbers 选项的情况下编译您的css？这将告诉您在 sass 文件中定义特定规则的位置。见这里：sass-lang.com/documentation/…
总猜测，但也许一个流浪的花括号实际上是嵌套的东西？如果您提供整个 SASS 文件可能会有所帮助。
调试过程的一部分涉及将问题分解为尽可能少的重现问题的代码。这里没有足够的代码来做到这一点。一旦你这样做了，答案就显而易见了。
这看起来像是使用@extend 的结果。我会在那里开始搜索。

标签： sass

【解决方案1】：

这个问题是由于“不那么小心”使用 SASS 的 @extend 功能引起的，我将永远更加小心地使用它。使用@extend 时要记住的一件非常重要的事情是扩展选择器将扩展选择器的所有出现。起初这有点难以理解（至少对我来说是这样）。例如，这些 SASS 规则：

.foo {
  font-weight: bold;
}

.bar {
  @extend .foo;
} 

.qux .foo {
  color: red;
}

将产生这些 CSS 规则：

.foo, .bar {
  font-weight: bold; }

.qux .foo, .qux .bar {
  color: red; }

来自 SASS 文档：@extend 通过在样式表中出现扩展选择器 (.foo) 的任何位置插入扩展选择器 (.bar) 来工作。

我想诀窍是不要将@extend 用于将在您的 SASS 文件中多次使用的元素。因此，如果您有 30 条 p 标签规则，请不要在您的 SASS 样式中使用“@extend p”，否则会产生大量可能不必要的 p 规则。

【讨论】：