Når du utvider en velger med @extenddirektivet, tar ikke Sass CSS-innholdet fra den utvidede velgeren for å plassere det i den utvidende. Det fungerer omvendt. Det tar utvidelsesvelgeren og legger den til den utvidede.
På grunn av hvordan det fungerer, gjør det det umulig å bruke det fra forskjellige omfang. For eksempel kan du ikke utvide en plassholder som er erklært i en @mediablokk, og du kan heller ikke utvide en plassholder fra roten hvis du er innenfor et @mediadirektiv.
Sikkert kan vi finne en måte å bruke @extendnår det er mulig, bland ellers. Faktisk er det gjennomførbart, men det er litt vanskelig, jeg kaller dette blandingshacket. Det kan være lurt å tenke deg om før du implementerer overalt i prosjektet. Kanskje det bare er enklere å bruke mixins. Jeg lar deg dommeren.
Innpakning @extend
Ideen er faktisk ganske enkel å forstå. Først definerer vi mixin. Den eneste parameteren er $extend, som definerer om mixin skal prøve å utvide i stedet for å inkludere. Åpenbart er det en boolsk (standard til true).
Hvis $extendja true, utvider vi en plassholder oppkalt etter mixin (dessverre blir dette ikke automatisk beregnet). Hvis det er false, dumper vi CSS-koden som en vanlig mixin ville gjort.
Ut av mixin definerer vi den nevnte plassholderen. For å unngå å gjenta CSS-koden i plassholderen, trenger vi bare å inkludere miksen ved å sette $extendtil falseslik at den kaster CSS-koden i plassholderens kjerne.
/// *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); )Eksempel
Som et enkelt eksempel vil vi bruke micro-clearfix fra Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Å bruke den er ganske grei:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Resultat CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublim teksttekst
Hvis du vil lagre kjeleplaten for å gjøre den svært gjenbrukbar, vil du være glad for å vite at det er veldig enkelt å lage et sublimt tekstutdrag for dette. I Sublime, gå til Verktøy> Ny kodebit ... og lim inn innholdet nedenfor.
Bytt gjerne nøkkelen for å sette det som flyter båten din; det er ordet å skrive før du trykker på for tabå utvide kodebiten. Jeg gikk med mixtend.
mixtend source.scss