Paplašinot selektoru ar @extenddirektīvu, Sass neņem CSS saturu no paplašinātā selektora, lai to ievietotu paplašinātajā. Tas darbojas otrādi. Tas aizņem paplašinošo atlasītāju un pievieno to paplašinātajam.
Tā kā tas darbojas, tas padara neiespējamu tā izmantošanu no dažādām jomām. Piemēram, jūs nevarat paplašināt vietturi, kas deklarēts @mediablokā, kā arī nevar paplašināt vietturi no saknes, ja atrodaties @mediadirektīvā.
Protams, mēs varam atrast veidu, kā izmantot, @extendja iespējams, citādi. Patiešām, tas ir izpildāms, bet tas ir mazliet grūts, es to saucu par mixend hack. Iespējams, vēlēsities padomāt divreiz, pirms īstenojat visur savā projektā. Varbūt vieglāk būtu izmantot tikai maisījumus. Es atstāšu tevi par tā tiesnesi.
Iesaiņošana @extend
Ideja patiesībā ir diezgan vienkārši aptverama. Vispirms mēs definējam mixin. Vienīgais parametrs ir tas $extend, kas nosaka, vai mixin ir jāmēģina paplašināt, nevis iekļaut. Acīmredzot tas ir būla skaitlis (noklusējums true).
Ja tā $extendir true, mēs paplašinām vietturi, kas nosaukts pēc sajaukuma (diemžēl tas netiek automātiski aprēķināts). Ja tas tā ir false, mēs CSS kodu izmetam kā parasts mixin.
No miksina mēs definējam iepriekš minēto vietturi. Lai izvairītos no CSS koda atkārtošanas vietturī, mums ir jāiekļauj tikai mixin ar iestatījumu $extend, falselai tas izgāž CSS kodu viettura kodolā.
/// *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); )Piemērs
Kā vienkāršu piemēru mēs izmantosim Nicolas Gallagher mikrotīrīšanas labojumu.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Tā lietošana ir diezgan vienkārša:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Rezultāts CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Cildens teksta fragments
Ja vēlaties saglabāt katlu, lai padarītu to ļoti atkārtoti lietojamu, jums būs prieks uzzināt, ka tam ir ļoti viegli izveidot Sublime Text fragmentu. Sublime dodieties uz Rīki> Jauns fragments ... un ielīmējiet tālāk esošo saturu.
Jūtieties brīvi nomainīt atslēgu, lai liktu visu, kas peld jūsu laivu; tas ir vārds, kas jāievada, pirms nospiediet, tablai izvērstu fragmentu. Gāju līdzi mixtend.
mixtend source.scss