SASS и Bootstrap - mixins vs. @extends

Question

Я использую SASS port of Bootstrap, и мне интересно, есть ли разница между использованием предварительно определенных миксинов и использованием SASS.

Например, если у меня есть

<div class="wrapper"> 
    Some content here.... 
</div> 

есть ли разница между выполнением

.wrapper { 
    @include make-row(); 
} 

и

.wrapper { 
    @extends .row; 
} 

Если нет никакой разницы, есть другие Примеси, которые Арен» t эквивалентно одному заявлению @extends? Если таких миксинов нет, почему миксины существуют?

Answer 1

Большая разница между @extends и микшированием - это способ скомпилирования css. Это не похоже на простые примеры, но различия и последствия значительны и могут быть настоящей головной болью в дикой природе, если использовать ее небрежно. @extends немного как дураки золота, отлично смотрится на первом, но ...

Давайте рассмотрим простой пример:

@extends

.row { 
    width: 50px; 
} 
.new-row { 
    @extends .row; 
} 
.another-row { 
    @extends .row; 
} 

компилирует в:

.row, 
.new-row, 
.another-row { 
    width: 50px; 
} 

mixin

@mixin row() { 
    width: 50px; 
} 
.new-row { 
    @include row(); 
} 
.another-row { 
    @include row(); 
} 

компилируется в:

.new-row { 
    width: 50px; 
} 
.another-row { 
    width: 50px; 
} 

Mixin включает в себя свойства везде, где он ударил - копирование их каждый раз - в то время как @extends групп селекторы и определяет свойства сразу. Это не сразу видно, потому что разница в скомпилированный CSS, но она имеет некоторые важные последствия:

порядок загрузки

С @extends селекторы будут сгруппированы в первой точке в дерзости, где они которые могут привести к некоторому странному переезду. Если вы определяете селектор и используете @extend для ввода свойства и пытаетесь переопределить свойство, определенное ранее в вашем sass, но после того, как расширенные свойства сгруппированы в css, переопределение не будет работать. Это может быть весьма озадачивающим.

Рассмотрим логически упорядоченный набор определений CSS и вероятную HTML: <div class='row highlight-row'></div>:

.red-text { 
    color: red; 
} 
.row { 
    color: green; 
} 
.highlight-row { 
    @extend .red-text; 
} 

компилирует в:

.red-text, 
.highlight-row { 
    color: red; 
} 
.row { 
    color: green; 
} 

Таким образом, даже несмотря на то, упорядочивание дерзость делает его похожим на цвет строки будет быть красным, скомпилированные css сделают его зеленым

Плохое объединение

@extend может привести к плохо сгруппированным селекторам в полученном css. Вы можете получить тридцать или сорок несвязанных вещей, которые, например, используют одно и то же свойство. Хорошим примером этого является использование @extends для шрифтов.

Верстка

Если вы используете глубоко вложенную дерзость (что не есть хорошо, кстати), и вы используете @extends вы будете дублировать полностью вложенный селектор для каждого @extends вы используете, в результате чего раздутого CSS. Я видел это много:

.selector-1 .selector-2 .selector-3 .selector-4, 
.selector-1 .selector-2 .selector-3 .selector-4 a, 
.selector-1 .selector-2 .selector-3 .selector-4 li, 
.selector-1 .selector-2 .selector-3 .selector-4 td { 
    font-family: ariel; 
} 

Если вы новичок в Sass он платит, чтобы посмотреть на скомпилированный CSS.

медиазапросы

@extends не работают внутри запросов СМИ, потому что средства массовой информации запросов не селекторы.

Заключение

Мое правило заключается в том, чтобы использовать @extends над Mixin, если у вас нет параметров и, если вы можете разумно определить @extends и разделить его между несколькими тесно связанных селекторов, которые существуют например, в том же файле, который определяет модуль sass. Кнопки являются хорошим примером хорошо используемых @extends:

%button { 
    padding: 10px; 
} 
.call-to-action { 
    @extend %button; 
    background-color: $green; 
} 
.submit { 
    @extend %button; 
    background-color: $grey; 
} 

Лучшая статья, чтобы помочь сделать выбор here

PS, то % знак является использование placeholder extends