Când extindeți un selector cu @extenddirectiva, Sass nu preia conținutul CSS din selectorul extins pentru al pune în cel extins. Funcționează invers. Acesta ia selectorul de extindere și îl atașează la cel extins.
Datorită modului în care funcționează, face imposibilă utilizarea acestuia din diferite domenii. De exemplu, nu puteți extinde un substituent care a fost declarat într-un @mediabloc și nici nu puteți extinde un substituent de la rădăcină dacă vă aflați într-o @mediadirectivă.
Cu siguranță putem găsi o modalitate de a folosi @extendcând este posibil, amestecând altfel. Într-adevăr, este realizabil, dar este un pic dificil, numesc asta hack-ul mixtend. S-ar putea să doriți să vă gândiți de două ori înainte de a implementa peste tot în proiect. Poate că ar fi mai ușor să folosiți mixine doar. Vă voi lăsa judecătorul.
Ambalaj @extend
Ideea este de fapt destul de ușor de înțeles. Mai întâi definim mixinul. Singurul parametru este $extend, care definește dacă mixinul ar trebui să încerce sau nu să extindă decât să includă. Evident, este un boolean (implicit la true).
Dacă $extendeste true, extindem un substituent numit după mixin (din păcate, acest lucru nu este calculat automat). Dacă este false, vom arunca codul CSS așa cum ar face un mixin obișnuit.
Din mixin, definim substituentul menționat anterior. Pentru a evita repetarea codului CSS în substituent, trebuie să includem mixinul doar prin setarea $extendla, falseastfel încât să arunce codul CSS în nucleul substituentului.
/// *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); )Exemplu
Ca un exemplu simplu, vom folosi micro-clearfix-ul de la Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Folosirea acestuia este destul de simplă:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )CSS rezultat:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Fragment de text sublim
Dacă doriți să salvați boilerplate pentru ao face reutilizabilă, veți fi încântați să știți că este foarte ușor să creați un fragment de text Sublim pentru aceasta. În Sublime, accesați Instrumente> Fragment nou ... și lipiți conținutul de mai jos.
Simțiți-vă liber să schimbați cheia pentru a pune tot ce plutește barca dvs.; este cuvântul de tastat înainte de a lovi tabpentru a extinde fragmentul. Am mers cu mixtend.
mixtend source.scss