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

我在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中？但事实并非如此。在我的SASS和CSS文件中搜索“margin:0 1em 0；”时，唯一使用该规则的元素是我的SASS文件中的非嵌套规则（如上所述）“.interviewprep.products.module img”

更让我迷惑的是，除了“.interviewprep.products.module img”的第一个元素之外，“在我编译的css中的那一行中，没有一个元素写在我的SASS文件的任何地方。它们都不是以非嵌套格式编写的，也没有任何嵌套元素的组合可以生成那些“已编译”的元素

例如，在我的SASS文件中，没有一个是巨大的css行中的第二个元素：“.interviewprep.products.bluemodule img”

在未列出的格式中找不到该规则，也没有任何嵌套格式的组合会产生该规则，如：

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

那么这些规则可能来自哪里呢？为了追踪所有这些规则，我做了大量的来回工作——我的css文件中充满了这些规则。我删除了大量不必要的嵌套，但css中的规则仍然太多。

这个问题是由于“不太小心”使用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）来工作

---

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

我无法重新解决此问题。您需要为我们提供帮助。您是否尝试过在启用

行号

选项的情况下编译css？这将告诉您在sass文件中定义了特定规则的位置。看这里：总的猜测，但也许一个流浪的卷发括号实际上是嵌套的东西？如果您提供了整个SASS文件，这可能会有所帮助。调试过程的一部分包括将问题剥离到尽可能少的代码量，以再现问题。这里没有足够的代码来实现这一点。一旦你这么做了，答案就显而易见了。这看起来像是使用

@extend

的结果。我会从那里开始搜索。