Kada proširuje selektor s @extenddirektivom, Sass ne uzima CSS sadržaj iz proširenog selektora da bi ga stavio u onaj koji se proširuje. Djeluje obrnuto. Potreban je proširujući selektor i dodati ga proširenom.
Zbog načina na koji to čini onemogućeno je korištenje iz različitih područja primjene. Na primjer, ne možete proširiti rezervirano mjesto koje je deklarirano u @mediabloku, niti možete proširiti rezervirano mjesto iz korijena ako ste unutar neke @mediadirektive.
Sigurno možemo pronaći način korištenja @extendkad god je to moguće, u suprotnom se miješamo. Doista je izvedivo, ali pomalo je zeznuto, ovo zovem mixtend hack. Možda biste trebali dobro razmisliti prije nego što implementirate bilo gdje u svoj projekt. Možda bi samo korištenje mixina bilo lakše. Ostavit ću vam suca toga.
Omotavanje @extend
Ideja je zapravo vrlo jednostavna za shvatiti. Prvo definiramo mixin. Jedini parametar je $extendkoji određuje treba li mixin pokušati proširiti, a ne uključiti. Očito je to logička vrijednost (zadana vrijednost true).
Ako $extendjest true, proširimo rezervirano mjesto nazvano prema mixinu (nažalost, to se ne računa automatski). Ako je tako false, izbacujemo CSS kôd kao što bi to činio uobičajeni mixin.
Iz miksa definiramo gore spomenuto rezervirano mjesto. Da bi se izbjeglo ponavljanje CSS kod u rezervirano mjesto, imamo samo uključiti mixin postavljanjem $extendna falsetako potištenost CSS kod u rezervirano mjesto jezgri.
/// *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); )Primjer
Kao jednostavan primjer, poslužit ćemo se mikročišćenim popravkom Nicolasa Gallaghera.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Korištenje je sasvim jednostavno:
.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; ) )Uzvišeni tekstni isječak
Ako želite spremiti obrazac kako biste ga učinili vrlo ponovnim za uporabu, bit će vam drago znati da je vrlo lako za to stvoriti isječak uzvišenog teksta. U Sublimeu idite na Alati> Novi isječak ... i zalijepite sadržaj u nastavku.
Slobodno promijenite ključ kako biste stavili sve što pluta na vašem brodu; riječ je koju treba upisati prije nego što pritisnete tabkako biste proširili isječak. Išao sam s mixtend.
mixtend source.scss