@extend Wrapper a.k.a Mixtend онлайн урок.


При расширении селектора с помощью директивы@extend, Sass не берет содержимое CSS из расширенного селектора, чтобы поместить его в расширяющийся. Это работает наоборот. Он принимает селектор расширения и добавляет его в расширенный.

Из-за того, как это работает, это делает невозможным использование его из разных областей. Например, вы не можете продлить местозаполнитель, который был объявлен в блоке@media, и вы не можете продлить местозаполнитель от root, если вы находитесь в директиве@media.

Конечно, мы можем найти способ использовать@extend, когда это возможно, mixin иначе. Действительно, это выполнимо, но это немного сложно, я называю этоmixendhack. Вы можете подумать дважды, прежде чем внедрять всюду в своем проекте. Возможно, использование миксинов было бы проще. Я оставлю вас судьей.

# Обертка@extend

Идею на самом деле довольно просто понять. Сначала мы определяем mixin. Единственный параметр -$ extend, который определяет, должен ли mixin пытаться расширить, а не включать. Очевидно, что это логическое значение (по умолчанию -true).

Если$ extendistrue, мы продляем местозаполнитель, названный в честь mixin (к сожалению, это не автоматически вычисляется). Если этоfalse, мы сбрасываем код CSS, как это делает обычный mixin.

Из микширования мы определяем вышеупомянутый заполнитель. Чтобы избежать повторения кода CSS в заполнителе, нам нужно включить mixin, установив$ 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);
}

# Пример

В качестве простого примера мы будем использовать micro-clearfix от Nicolas Gallagher .

@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, перейдите кTools & gt; Новый фрагмент...и вставьте содержимое ниже.

Не стесняйтесь изменять значение& lt; tabTrigger & gt;ключ, чтобы поместить все, что плавает ваша лодка; это слово для ввода перед нажатиемдля расширения фрагмента. Я пошел сmixtend

<snippet>
<content><![CDATA[
@mixin ${1:mixtend}(\$extend: true) {
@if $extend {
@extend %${1:mixtend};
} @else {
${2}
}
}

%${1:mixtend} {
@include ${1:mixtend}(\$extend: false);
}
]]>
</content>
<tabTrigger>mixtend</tabTrigger>
<scope>source.scss</scope>
</snippet>