Kun laajennat valitsinta @extenddirektiivillä, Sass ei ota CSS-sisältöä laajennetusta valitsimesta laittaakseen sen laajentimeen. Se toimii päinvastoin. Se vie laajentavan valitsimen ja liittää sen laajennettuun.
Toimintansa vuoksi se tekee mahdottomaksi käyttää sitä eri laajuuksilta. Et voi esimerkiksi laajentaa @medialohkossa ilmoitettua paikkamerkkiä, et myöskään laajentaa paikkamerkkiä juuresta, jos olet @mediadirektiivissä.
Varmasti voimme löytää tavan käyttää, @extendkun mahdollista, miksaa muuten. Itse asiassa se on toteutettavissa, mutta se on vähän hankalaa, kutsun tätä sekoitushakuksi. Haluat ehkä miettiä kahdesti ennen kuin toteutat projektin kaikkialla. Ehkä vain sekoitusten käyttö olisi helpompaa. Jätän sinut tuomariksi.
Kääriminen @extend
Idea on oikeastaan melko helppo ymmärtää. Ensin määritellään mixin. Ainoa parametri on $extend, joka määrittää, pitäisikö mixinin yrittää laajentaa eikä sisällyttää. On selvää, että se on totuusarvo (oletus true).
Jos $extendon true, laajennamme paikkamerkin, joka on nimetty miksauksen mukaan (valitettavasti tätä ei lasketa automaattisesti). Jos se on false, jätämme CSS-koodin tavalliseen miksaukseen.
Sekoituksesta määritellään edellä mainittu paikkamerkki. Välttää toistamasta CSS koodin paikanvaraajassa meillä on vain sisällyttää Mixin asettamalla $extendja falseniin se kaatopaikkojen CSS koodin paikanvaraajan ydin.
/// *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); )Esimerkki
Yksinkertaisena esimerkkinä käytämme Nicolas Gallagherin mikrokirkasta korjausta.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Sen käyttö on melko suoraviivaista:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Tulos CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime-tekstikatkelma
Jos haluat tallentaa kattilalevyn, jotta se olisi erittäin uudelleenkäytettävissä, on ilo tietää, että Sublime-tekstikatkelman luominen tähän on erittäin helppoa. Siirry Sublime-sovelluksessa kohtaan Työkalut> Uusi katkelma ... ja liitä alla oleva sisältö.
Voit vapaasti vaihtaa avainta laittaaksesi kaiken kelluvan veneeseesi; se on sana, joka kirjoitetaan ennen kuin painat tablaajentaa katkelmaa. Menin mukaan mixtend.
mixtend source.scss