När @extendSass utökar med direktivet tar Sass inte CSS-innehållet från den utökade väljaren för att placera det i det utökande. Det fungerar tvärtom. Det tar utökningsväljaren och lägger till den till den utökade.
På grund av hur det fungerar gör det omöjligt att använda den från olika omfattningar. Du kan till exempel inte förlänga en platshållare som har förklarats i ett @mediablock, och du kan inte heller förlänga en platshållare från root om du är inom ett @mediadirektiv.
Visst kan vi hitta ett sätt att använda @extendnär det är möjligt, mixin annars. Det är faktiskt genomförbart men det är lite knepigt, jag kallar det här för blandning. Du kanske vill tänka två gånger innan du implementerar överallt i ditt projekt. Att kanske bara använda mixins skulle vara enklare. Jag lämnar dig domaren för det.
Omslag @extend
Idén är faktiskt ganska enkel att förstå. Först definierar vi mixin. Den enda parametern är $extendsom definierar huruvida mixin ska försöka utvidga istället för att inkludera. Uppenbarligen är det en boolean (standard till true).
Om så $extendär truefallet förlänger vi en platshållare som heter namnet mixin (tyvärr beräknas detta inte automatiskt). Om så är falsefallet dumpar vi CSS-koden som en vanlig mixin skulle göra.
Ur mixen definierar vi ovannämnda platshållare. För att undvika att upprepa CSS-koden i platshållaren behöver vi bara inkludera mixin genom att ställa $extendin falseså att den släpper CSS-koden i platshållarens kärna.
/// *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); )Exempel
Som ett enkelt exempel kommer vi att använda micro-clearfix från Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Att använda det är ganska enkelt:
.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 textavsnitt
Om du vill spara pannplattan för att göra den mycket återanvändbar kommer du att vara glad att veta att det är väldigt enkelt att skapa ett sublimt textavsnitt för detta. I Sublime, gå till Verktyg> Nytt utdrag ... och klistra in innehållet nedan.
Byt gärna nyckeln för att placera det som flyter i din båt; det är ordet att skriva innan du trycker på för tabatt expandera kodavsnittet. Jag gick med mixtend.
mixtend source.scss