Praplečiant selektorių su @extenddirektyva, „Sass“ nepaima CSS turinio iš išplėstinio selektoriaus, kad įdėtų jį į išplėstinį. Tai veikia atvirkščiai. Reikia pailginti parinkiklį ir pridėti jį prie išplėstinio.
Dėl to, kaip jis veikia, neįmanoma jo naudoti iš skirtingų sričių. Pvz., Negalite išplėsti vietoje pažymėtos vietos, kuri buvo paskelbta @mediabloke, taip pat negalite išplėsti vietos rezervavimo ženklo nuo šaknies, jei esate @mediadirektyvos narys.
Tikrai galime rasti būdą, kaip naudoti, @extendjei įmanoma, kitaip. Iš tiesų, tai įmanoma, bet tai šiek tiek keblu, aš tai vadinu „mixend hack“. Galbūt norėsite gerai pagalvoti prieš įgyvendindami visur savo projektą. Galbūt paprasčiau būtų naudoti tik mišinius. Aš paliksiu tave to teisėju.
Apvyniojimas @extend
Idėją iš tikrųjų yra gana paprasta suvokti. Pirmiausia apibrėžiame miksiną. Vienintelis parametras yra tas $extend, kuris apibrėžia, ar mišinys turėtų bandyti išplėsti, o ne įtraukti. Akivaizdu, kad tai yra loginė reikšmė (numatytasis nustatymas true).
Jei $extendtaip true, išplėsime vietos pavadinimą, pavadintą „mixin“ vardu (deja, tai nėra automatiškai apskaičiuojama). Jei taip false, mes išleidžiame CSS kodą, kaip tai darytų įprastas derinys.
Iš „mixin“ apibrėžiame minėtą vietos rezervavimo ženklą. Kad nesikartotume CSS kodo vietos rezervavimo ženkle, turime įtraukti tik mišinį nustatydami $extendį, falsekad jis išmestų CSS kodą į rezervuotojo šerdį.
/// *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); )Pavyzdys
Kaip paprastą pavyzdį naudosime Nicolaso Gallagherio mikroprocesorių.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Naudojimas yra gana paprastas:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Rezultatas CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Prabangus teksto fragmentas
Jei norite išsaugoti katilą, kad jis būtų daugkartinis, jums bus malonu žinoti, kad tam labai lengva sukurti „Sublime“ teksto fragmentą. Sublime eikite į Įrankiai> Naujas fragmentas ... ir įklijuokite toliau pateiktą turinį.
Nedvejodami pakeiskite raktą, kad uždėtumėte viską, kas plūduriuoja jūsų valtį; tai žodis, kurį reikia įvesti prieš paspaudžiant tabišplėsti fragmentą. Ėjau su mixtend.
mixtend source.scss