Når @extendSass udvider med direktivet, tager Sass ikke CSS-indholdet fra den udvidede vælger for at placere det i det udvidede. Det fungerer omvendt. Det tager den udvidede vælger og føjer den til den udvidede.
På grund af hvordan det fungerer, gør det det umuligt at bruge det fra forskellige anvendelsesområder. For eksempel kan du ikke udvide en pladsholder, der er erklæret i en @mediablok, og du kan heller ikke udvide en pladsholder fra rod, hvis du er inden for et @mediadirektiv.
Vi kan helt sikkert finde en måde at bruge, @extendnår det er muligt, mixin ellers. Faktisk er det gennemførligt, men det er lidt vanskeligt, jeg kalder dette blandingshacket. Du vil måske tænke to gange, før du implementerer overalt i dit projekt. Måske ville det kun være lettere at bruge mixins. Jeg efterlader dig dommeren over det.
Indpakning @extend
Ideen er faktisk ret enkel at forstå. Først definerer vi mixin. Den eneste parameter er $extend, der definerer, om mixin skal prøve at udvide i stedet for at inkludere. Det er selvfølgelig en boolsk (standard til true).
Hvis det $extender true, udvider vi en pladsholder, der er opkaldt efter mixin (desværre beregnes dette ikke automatisk). Hvis det er false, dumper vi CSS-koden, som en almindelig mixin ville gøre.
Ud af mixin definerer vi den førnævnte pladsholder. For at undgå at gentage CSS-koden i pladsholderen, behøver vi kun at inkludere mixin ved at indstille $extendtil, falseså den dumper CSS-koden i pladsholderens kerne.
/// *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 simpelt eksempel bruger vi 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); )Brug af det er ret ligetil:
.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 tekstuddrag
Hvis du vil gemme kedelpladen for at gøre den meget genanvendelig, vil du være glad for at vide, at det er meget let at oprette et sublimt tekstuddrag til dette. I Sublime skal du gå til Værktøjer> Nyt uddrag ... og indsætte indholdet nedenfor.
Du er velkommen til at skifte nøgle for at sætte det, der flyder din båd; det er ordet at skrive, inden du trykker på for tabat udvide kodestykket. Jeg gik med mixtend.
mixtend source.scss