Při rozšiřování selektoru pomocí @extendsměrnice Sass nebere obsah CSS z rozšířeného selektoru, aby jej vložil do rozšiřujícího. Funguje to naopak. Trvá selektor rozšíření a připojí se k rozšířenému.
Kvůli tomu, jak to funguje, znemožňuje použití z různých oborů. Například nemůžete rozšířit zástupný symbol, který byl deklarován v @mediabloku, ani nemůžete rozšířit zástupný symbol z kořenového adresáře, pokud jste v rámci @mediasměrnice.
Určitě můžeme najít způsob, jak to použít, @extendpokud je to možné, jinak mixin. Opravdu je to proveditelné, ale je to trochu ošidné, říkám tomu mixovací hack. Možná budete chtít dvakrát rozmyslet, než implementujete všude ve svém projektu. Možná by bylo jednodušší používat pouze mixiny. Nechám vás soudce toho.
Obal @extend
Myšlenka je vlastně docela jednoduchá. Nejprve definujeme mixin. Jediným parametrem je $extend, který definuje, zda by se mixin měl pokusit rozšířit, nikoli zahrnout. Je zřejmé, že jde o logickou hodnotu (výchozí true).
Pokud $extendje true, jsme rozšířili zástupný pojmenovaná po mixin (bohužel to není automagicky počítané). Pokud je false, vypsáme kód CSS tak, jak by to udělal běžný mixin.
Z mixinu definujeme výše uvedený zástupný symbol. Aby se zabránilo opakování CSS kód do vyhrazeného místa, máme jen zahrnout mixin nastavením $extendse falsetak, že vypíše CSS kód v jádře 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); )Příklad
Jako jednoduchý příklad použijeme micro-clearfix od Nicolase Gallaghera.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Jeho použití je celkem jednoduché:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Výsledek CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Úžasný úryvek textu
Chcete-li uložit typový štítek, aby byl znovu použitelný, budete rádi, že je velmi snadné vytvořit úryvek Sublime Text. V Sublime přejděte na Nástroje> Nový úryvek ... a vložte níže uvedený obsah.
Nebojte se změnit klíč a dát cokoli, co plave na vaší lodi; je to slovo, které chcete napsat, než stisknete taba rozbalíte úryvek. Šel jsem s mixtend.
mixtend source.scss