Bij het uitbreiden van een selector met de @extendrichtlijn, neemt Sass de CSS-inhoud niet van de uitgebreide selector om deze in de uitbreidende te plaatsen. Het werkt andersom. Het neemt de uitbreidende selector en voegt deze toe aan de uitgebreide.
Vanwege de manier waarop het werkt, is het onmogelijk om het vanuit verschillende scopes te gebruiken. U kunt bijvoorbeeld een tijdelijke aanduiding die in een @mediablok is gedeclareerd , niet uitbreiden, noch kunt u een tijdelijke aanduiding vanuit root uitbreiden als u zich binnen een @mediarichtlijn bevindt.
We kunnen zeker een manier vinden om te gebruiken @extendwanneer mogelijk, anders mengen. Het is inderdaad goed te doen, maar het is een beetje lastig, ik noem dit de mixtend-hack. Misschien wilt u twee keer nadenken voordat u het overal in uw project implementeert. Misschien zou het gebruik van alleen mixins gemakkelijker zijn. Ik laat jou daarover de rechter.
Inpakken @extend
Het idee is eigenlijk vrij eenvoudig te begrijpen. Eerst definiëren we de mixin. De enige parameter is $extend, die bepaalt of de mixin moet proberen uit te breiden in plaats van op te nemen. Het is duidelijk een booleaanse waarde (standaard ingesteld op true).
Als dat zo $extendis true, voegen we een tijdelijke aanduiding toe met de naam mixin (helaas wordt dit niet automagisch berekend). Als dat zo is false, dumpen we de CSS-code zoals een gewone mix dat zou doen.
Uit de mixin definiëren we de bovengenoemde tijdelijke aanduiding. Om te voorkomen dat de CSS-code in de tijdelijke aanduiding wordt herhaald, hoeven we alleen de mixin op te nemen door $extenddeze falsezo in te stellen dat de CSS-code in de kern van de tijdelijke aanduiding wordt gedumpt.
/// *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); )Voorbeeld
Als eenvoudig voorbeeld gebruiken we de micro-clearfix van Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Het gebruik ervan is vrij eenvoudig:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Resultaat CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Subliem tekstfragment
Als u de standaardplaat wilt bewaren om deze in hoge mate herbruikbaar te maken, zult u blij zijn te weten dat het heel eenvoudig is om hiervoor een subliem tekstfragment te maken. Ga in Sublime naar Tools> New snippet ... en plak de onderstaande inhoud.
Voel je vrij om de sleutel te veranderen om alles wat je boot drijft te plaatsen; het is het woord dat u moet typen voordat u op drukt tabom het fragment uit te vouwen. Ik ging mee mixtend.
mixtend source.scss