Question

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

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

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

但是当我查看我编译的css文件并搜索＆＃34; .interviewprep .products .module img，＆＃34;我发现这个巨大的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中？但事实并非如此。当我搜索＆＃34;保证金：0 1em 0 0;＆＃34;在我的SASS和我的CSS文件中，使用该规则的唯一元素是来自我的SASS文件的非嵌套规则（如上所述）＆＃34; .interviewprep .products .module img＆＃34;

对我来说更神秘的是除了＃34; .interviewprep .products .module img，＆＃34;的第一个元素。我编译的css中那个巨行中的那些元素中的任何元素都写在我的SASS文件中的任何地方。它们都不是以unnested格式编写的，也没有嵌套元素的任何组合可以产生那些＆＃34;编译的＃34;元件。

例如，我的SASS文件中没有任何地方是巨型css行中的第二个元素：＆＃34; .interviewprep .products .bluemodule img＆＃34;

该规则无法以无形格式找到，也没有任何可以产生该规则的嵌套格式组合，如：

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

那么所有这些规则可能都来自哪里？我已经做了大量的来回试图追查所有这些规则 - 我的css文件已经填满了他们。我已经带走了一堆不必要的嵌套，但我的css中仍然有太多的规则。

Answer 1

这个问题是由＆＃34; not-so-careful＆＃34;使用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标签规则，请不要使用＆＃34; @extend p＆＃34;在你的SASS风格中，它会产生大量可能不必要的p规则。

为什么SASS会产生如此多的CSS规则？

1 个答案: