Когато разширява селектор с @extendдирективата, Sass не взема CSS съдържанието от разширения селектор, за да го постави в разширяващия се. Работи обратното. Той взема разширяващия се селектор и го добавя към разширения.
Поради начина, по който работи, прави невъзможно използването му от различен обхват. Например, не можете да разширите запазено място, което е декларирано в @mediaблок, нито можете да разширите запазено място от root, ако сте в рамките на @mediaдиректива.
Със сигурност можем да намерим начин да използваме, @extendкогато е възможно, смесваме иначе. Всъщност това е изпълнимо, но е малко сложно, аз наричам това хак на mixtend. Може да помислите два пъти, преди да внедрите навсякъде във вашия проект. Може би използването само на миксини би било по-лесно. Ще ви оставя съдия по това.
Опаковане @extend
Идеята всъщност е доста проста за възприемане. Първо дефинираме смесицата. Единственият параметър е $extend, който определя дали миксинът трябва да се опита да разшири, вместо да включи. Очевидно е, че е булев (по подразбиране true).
Ако $extendе true, ние разширяваме резервоар, кръстен на миксина (за съжаление, това не се изчислява автоматично). Ако е така 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 отидете на Tools> New snippet ... и поставете съдържанието по-долу.
Чувствайте се свободни да смените ключа, за да сложите каквото и да е, което плава във вашата лодка; това е думата, която трябва да въведете, преди да натиснете, за tabда разширите фрагмента. Отидох с mixtend.
mixtend source.scss