При расширении селектора с помощью @extendдирективы Sass не берет содержимое CSS из расширенного селектора, чтобы поместить его в расширяемый. Это работает наоборот. Он берет расширяющийся селектор и добавляет его к расширенному.
Из-за того, как он работает, невозможно использовать его из разных областей. Например, вы не можете расширить заполнитель, который был объявлен в @mediaблоке, а также вы не можете расширить заполнитель из корня, если вы находитесь внутри @mediaдирективы.
Конечно, мы можем найти способ использовать, @extendкогда это возможно, иначе миксин. Действительно, это выполнимо, но немного сложно, я называю это микстендом. Возможно, вам стоит дважды подумать, прежде чем внедрять везде в своем проекте. Возможно, было бы проще использовать только миксины. Я оставлю вам судить об этом.
Оберточная бумага @extend
Идея на самом деле довольно проста. Сначала мы определяем миксин. Единственный параметр $extend, который определяет, следует ли миксину пытаться расширить, а не включать. Очевидно, это логическое значение (по умолчанию true).
Если $extendесть true, мы расширяем заполнитель, названный в честь миксина (к сожалению, это не вычисляется автоматически). Если это так false, мы сбрасываем код CSS, как это сделал бы обычный миксин.
Из миксина мы определяем вышеупомянутый заполнитель. Чтобы избежать повторения кода CSS в заполнителе, нам нужно только включить миксин, установив $extendзначение, falseчтобы он выгружал код CSS в ядро заполнителя.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Пример
В качестве простого примера мы воспользуемся микрочастицей от Николаса Галлахера.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Использовать его довольно просто:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Результат CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime Text Snippet
Если вы хотите сохранить шаблон, чтобы сделать его многоразовым, вам будет приятно узнать, что для этого очень легко создать фрагмент Sublime Text. В Sublime перейдите в Инструменты> Новый фрагмент… и вставьте содержимое ниже.
Не стесняйтесь менять ключ, чтобы поставить все, что плавает ваша лодка; это слово, которое нужно ввести перед тем, как нажать, tabчтобы развернуть фрагмент. Я пошел с mixtend.
mixtend source.scss