Почему SASS создает так много правил CSS?

Question

Я пишу свой CSS в файле SASS и скомпилирую его с помощью CodeKit в документ CSS. Я постоянно был озадачен тем, как именно SASS компилирует мои правила CSS, особенно когда я пытаюсь отслеживать скомпилированные правила CSS, которые, похоже, не имеют соответствующего правила SASS.

У меня есть SASS файл со следующим правилом, которое не вложен:

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

Но когда я смотрю на мой скомпилированный файл CSS, и я искать ".interviewprep .продукция .module IMG," I найти это гигантское правило 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? Но это не так. Когда я ищу «margin: 0 1em 0 0;» как в моем SASS, так и в моем файле CSS, единственным элементом, использующим это правило, является не-вложенное правило из моего файла SASS (как указано выше). .interviewprep .products .module img "

Даже БОЛЬШЕ мистифицировать меня что кроме первого элемента «.interviewprep .products .module img», NONE из тех элементов этой гигантской линии в моем скомпилированном css записываются где-нибудь в моем файле SASS. Ни один из них не написан в неназванном формате и не существует комбинаций вложенных элементов, которые могли бы создавать эти «скомпилированные» элементы.

Например, нигде в моем файле SASS является то, что второй элемент из гигантской Css строки: «.interviewprep .продукция .bluemodule IMG»

Это правило нигде не должны быть найден в безгнездном формате, и не существует любые комбинации вложенных форматов, которые производят это правило, как в:

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

так где все могли бы из этих правил, возможно, будут приходить из? Я сделал тонну назад и вперед, пытаясь отследить все эти правила - мой файл css ЗАПОЛНЕН с ними. Я отнял TON ненужного гнездования, но все же у меня слишком много правил в моем css.

Answer 1

Эта проблема вызвана «не очень внимательным» использованием функции @extend SASS, которая навсегда я буду использовать с большей осторожностью. Очень важно помнить, что при использовании @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 работает, вставив простирающийся селектор (.bar) в любом месте таблицы стилей, что появляется расширенный селектор (.foo).

Я полагаю, что трюк заключается в том, чтобы не использовать @extend для элементов, которые будут использоваться много раз в вашем файле SASS. Итак, если у вас есть 30 правил для p-тэгов, не используйте «@extend p» в ваших стилях SASS или он будет генерировать массу ненужных p-правил.