Када проширује селектор @extendдирективом, Сасс не узима ЦСС садржај из проширеног селектора да би га ставио у проширујући. Делује обрнуто. Потребан је продужавајући селектор и додаје га проширеном.
Због начина на који делује, онемогућава га коришћење из различитих домета. На пример, не можете проширити резервирано место које је декларисано у @mediaблоку, нити можете проширити резервирано место из корена ако сте у оквиру неке @mediaдирективе.
Сигурно можемо наћи начин да користимо @extendкад год је то могуће, у супротном мешамо. Заиста, то је изведиво, али помало је зезнуто, ово зовем миктенд хацк. Можда бисте требали добро размислити пре него што примените било где у свом пројекту. Можда би коришћење само миксина било лакше. Остављам вам судију о томе.
Умотавање @extend
Идеја је заправо прилично једноставна за схватање. Прво дефинишемо миксин. Једини параметар је $extendкоји одређује да ли микин треба да покуша да прошири уместо да укључи. Очигледно је логичка вредност (подразумевано true).
Ако $extendјесте true, проширујемо резервирано место названо по миксину (нажалост, ово се не рачуна аутоматски). Ако је тако false, избацујемо ЦСС код као што би то радио уобичајени миксин.
Из микса дефинишемо горе поменуто резервирано место. Да би се избегло понављање код ЦСС у плејсхолдер, имамо само да укључи микин постављањем $extendна falseтако да шутне код ЦСС у језгру плејсхолдер је.
/// *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); ) )Резултат ЦСС:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Узвишени текстни исечак
Ако желите да сачувате таблу како бисте је учинили врло употребљивом, биће вам драго да знате да је врло лако за ово створити исечак Сублиме Тект. У Сублиме, идите на Тоолс> Нев сниппет ... и залепите садржај испод.
Слободно промените кључ да бисте ставили све што плута вашим бродом; то је реч коју треба откуцати пре него што притиснете tabда бисте проширили фрагмент. Ишао сам са mixtend.
mixtend source.scss