Keď rozširuje selektor o @extendsmernicu, Sass neberie obsah CSS z rozšíreného selektora, aby ho vložil do rozširujúceho. Funguje to naopak. Trvá selekčný volič a pripojí ho k rozšírenému.
Vďaka tomu, ako to funguje, znemožňuje použitie z rôznych rozsahov. Napríklad nemôžete rozšíriť zástupný symbol, ktorý bol deklarovaný v @mediabloku, ani nemôžete rozšíriť zástupný symbol z koreňového adresára, ak ste v rámci @mediasmernice.
Určite nájdeme spôsob, ako to použiť, @extendkeď je to možné, inak mixin. V skutočnosti je to uskutočniteľné, ale je to trochu zložité, hovorím tomu hack mixu. Možno by ste si mali dobre rozmyslieť, než sa do projektu zapojíte všade. Možno by bolo jednoduchšie iba použitie mixínov. Nechám vás toho sudcu.
Obal @extend
Myšlienka je v skutočnosti celkom jednoduchá. Najskôr definujeme mixin. Jediným parametrom je $extend, ktorý definuje, či sa má mixin pokúsiť skôr rozšíriť ako zahrnúť. Je zrejmé, že ide o boolean (predvolené nastavenie true).
Ak $extendje true, rozšírime zástupný symbol pomenovaný po zmiešaní (bohužiaľ to nie je vypočítané automaticky). Ak je to false, vyradíme kód CSS tak, ako by to urobil bežný mixin.
Z mixinu definujeme vyššie uvedený zástupný symbol. Aby sa zabránilo opakovaniu CSS kód do vyhradeného miesta, máme len zahrnúť mixin nastavením $extendsa falsetak, že vypíše CSS kód v jadre zástupného symbolu 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); )Príklad
Ako jednoduchý príklad použijeme micro-clearfix od Nicolasa Gallaghera.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Jeho použitie je celkom jednoduché:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Výsledok CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Úžasný úryvok textu
Ak chcete uložiť štandardný štítok, aby bol znovu použiteľný, budete radi, že je ľahké vytvoriť útržok textu Sublime Text. V aplikácii Sublime prejdite do časti Nástroje> Nový úryvok ... a vložte nasledujúci obsah.
Nebojte sa zmeniť kľúč, aby ste dali čokoľvek, čo pláva na vašej lodi; je to slovo, ktoré chcete napísať, skôr ako kliknete tabna rozšírenie úryvku. Išiel som s mixtend.
mixtend source.scss