Ko razširja izbirnik z @extenddirektivo, Sass ne vzame vsebine CSS iz razširjenega izbirnika, da bi ga postavil v razširjenega. Deluje obratno. Vzame razširitveni izbirnik in ga doda razširjenemu.
Zaradi tega, kako deluje, je nemogoče uporabljati iz različnih področij uporabe. Na primer, ne morete razširiti rezerviranega mesta, ki je bilo prijavljeno v @mediabloku, niti ne morete razširiti rezerviranega mesta iz root, če ste v @mediadirektivi.
Zagotovo lahko najdemo način uporabe, @extendkadar je to mogoče, sicer pa mešamo. Dejansko je izvedljivo, vendar je nekoliko zapleteno, temu pravim, da je mixtend kramp. Morda boste dobro premislili, preden boste povsod v svojem projektu izvedli projekt. Morda bi bila uporaba samo mešanic lažja. Pustil vam bom sodnika tega.
Zavijanje @extend
Ideja je pravzaprav dokaj preprosta. Najprej določimo mixin. Edini parameter je $extend, ki določa, ali naj mixin poskuša razširiti in ne vključiti. Očitno je logična vrednost (privzeto true).
Če $extendje true, razširimo nadomestni znak, poimenovan po mešanici (na žalost to ni samodejno izračunano). Če je tako false, izpustimo kodo CSS kot običajni mixin.
Izmešali smo zgoraj omenjeno rezervirano mesto. Da bi se izognili ponavljanju kodo CSS v ogrado, imamo le vključiti Mixin z določitvijo $extend, da falsezato odlagališč kodo CSS v jedru ograda je.
/// *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); )Primer
Kot preprost primer bomo uporabili mikro-clearfix Nicolasa Gallagherja.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Uporaba je povsem enostavna:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Rezultat CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Vzvišeni besedilni delček
Če želite shraniti vzorčno ploščo, da jo boste lahko ponovno uporabili, boste z veseljem vedeli, da je za to zelo enostavno ustvariti delček Sublime Text. V Sublime pojdite na Tools> New snippet… in prilepite spodnjo vsebino.
Prosimo, spremenite ključ, da vstavite vse, kar plava na vašem čolnu; to je beseda, ki jo vtipkate, preden pritisnete, tabda razširite odrezek. Šel sem z mixtend.
mixtend source.scss