Semasa memperluas pemilih dengan @extendarahan, Sass tidak mengambil kandungan CSS dari pemilih diperpanjang untuk memasukkannya ke dalam pemilih. Ia berfungsi sebaliknya. Ia memerlukan pemilih memanjang dan menambahkannya ke pemilih yang diperpanjang.
Kerana cara kerjanya, mustahil untuk menggunakannya dari ruang lingkup yang berbeza. Sebagai contoh, anda tidak dapat memperluas placeholder yang telah diisytiharkan dalam @mediablok, dan juga tidak boleh memperluas placeholder dari root jika anda berada dalam @mediaarahan.
Tentunya kita dapat mencari cara untuk menggunakan @extendbila mungkin, campurkan sebaliknya. Memang boleh dilakukan tetapi agak rumit, saya sebut ini sebagai penggabungan campuran. Anda mungkin mahu berfikir dua kali sebelum melaksanakan di mana sahaja dalam projek anda. Mungkin menggunakan mixin sahaja lebih mudah. Saya akan meninggalkan anda hakim itu.
Pembalut @extend
Idea sebenarnya cukup mudah untuk difahami. Mula-mula kita menentukan mixin. Satu-satunya parameter adalah $extend, yang menentukan sama ada mixin harus mencuba memanjang atau tidak termasuk. Jelas, ia adalah boolean (default to true).
Sekiranya $extendada true, kami memperluas placeholder yang diberi nama mixin (malangnya, ini tidak dikira secara automatik). Sekiranya ada false, kami membuang kod CSS seperti yang biasa dilakukan oleh mixin biasa.
Daripada mixin, kami menentukan placeholder yang disebutkan di atas. Untuk mengelakkan mengulangi kod CSS di ruang letak, kita cuma dikehendaki memasukkan mixin dengan menetapkan $extenduntuk falsejadi tempat pembuangan sampah kod CSS di dalam teras pemegang tempat ini.
/// *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); )Contohnya
Sebagai contoh mudah, kami akan menggunakan perbaikan mikro dari Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Menggunakannya sangat mudah:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Hasil CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Coretan Teks Sublime
Sekiranya anda ingin menyimpan plat boiler agar dapat digunakan semula, anda akan senang mengetahui bahawa sangat mudah untuk membuat coretan Teks Sublime untuk ini. Di Sublime, pergi ke Alat> Coretan baru… dan tampal kandungan di bawah.
Jangan ragu untuk menukar kunci untuk meletakkan apa sahaja yang mengapung kapal anda; adalah perkataan untuk menaip sebelum memukul tabuntuk mengembangkan coretan. Saya pergi bersama mixtend.
mixtend source.scss