Розширюючи селектор за допомогою @extendдирективи, Sass не бере вміст CSS із розширеного селектора, щоб помістити його в розширюючий. Це працює навпаки. Він бере розширювальний селектор і додає його до розширеного.
Через те, як це працює, це робить неможливим використання його з різних областей застосування. Наприклад, ви не можете розширити заповнювач, який був оголошений у @mediaблоці, а також не можете розширити заповнювач із кореня, якщо ви перебуваєте в межах @mediaдирективи.
Звичайно, ми можемо знайти спосіб використовувати, @extendколи це можливо, змішати інакше. Дійсно, це можливо, але це трохи складно, я називаю це комбінованим руйнуванням. Можливо, ви захочете добре подумати, перш ніж впроваджувати будь-де у своєму проекті. Можливо, використовувати лише міксини було б простіше. Я залишу вас суддею цього.
Обгортання @extend
Ідея насправді досить проста для сприйняття. Спочатку визначаємо міксин. Єдиним параметром є $extend, який визначає, чи слід мікшину спробувати розширити, а не включити. Очевидно, що це логічне значення (за замовчуванням true).
Якщо $extendє true, ми розширимо заповнювач , названий в честь Mixin (на жаль, це не автомагіческій обчисленої). Якщо це так false, ми скидаємо CSS-код, як це робив звичайний мікс.
З міксину ми визначаємо вищезазначений заповнювач. Щоб уникнути повторення коду 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); )Приклад
Як простий приклад ми будемо використовувати мікрочистий виправлення від Ніколаса Галлагера.
@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. У Sublime перейдіть до Інструменти> Новий фрагмент… та вставте вміст нижче.
Не соромтеся поміняти ключ, щоб покласти все, що плаває на вашому човні; це слово, яке слід набрати перед натисканням, tabщоб розгорнути фрагмент. Я пішов з mixtend.
mixtend source.scss