Saat memperluas pemilih dengan @extendarahan, Sass tidak mengambil konten CSS dari pemilih yang diperluas untuk meletakkannya di selektor yang diperluas. Ia bekerja sebaliknya. Ini mengambil pemilih yang diperluas dan menambahkannya ke yang diperpanjang.
Karena cara kerjanya, penggunaannya tidak memungkinkan dari cakupan yang berbeda. Misalnya, Anda tidak dapat memperluas placeholder yang telah dideklarasikan dalam @mediablok, Anda juga tidak dapat memperluas placeholder dari root jika Anda berada dalam @mediadirektif.
Tentunya kita dapat menemukan cara untuk menggunakan @extendbila memungkinkan, campur sebaliknya. Memang bisa dilakukan tapi agak rumit, saya menyebutnya hack mixtend. Anda mungkin ingin berpikir dua kali sebelum menerapkan di mana-mana dalam proyek Anda. Mungkin menggunakan mixin saja akan lebih mudah. Saya akan meninggalkan Anda yang menilai itu.
Pembungkus @extend
Ide ini sebenarnya cukup sederhana untuk dipahami. Pertama kami mendefinisikan mixin. Satu-satunya parameter adalah $extend, yang menentukan apakah mixin harus mencoba memperluas atau tidak daripada menyertakan. Jelas, ini adalah boolean (default ke true).
Jika $extendadalah true, kita memperpanjang sebuah tempat bernama setelah mixin (sayangnya, ini tidak otomatis dihitung). Jika ya false, kami membuang kode CSS seperti yang biasa dilakukan oleh mixin biasa.
Di luar mixin, kami menentukan placeholder yang disebutkan di atas. Untuk menghindari pengulangan kode CSS di placeholder, kami hanya harus menyertakan mixin dengan menetapkan $extenduntuk falsejadi dump kode CSS dalam inti placeholder 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); )Contoh
Sebagai contoh sederhana, kami akan menggunakan micro-clearfix dari Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Menggunakannya cukup 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; ) )Cuplikan Teks Sublim
Jika Anda ingin menyimpan boilerplate agar dapat digunakan kembali, Anda akan senang mengetahui bahwa sangat mudah membuat cuplikan Sublime Text untuk ini. Di Sublime, buka Tools> New snippet… dan paste konten di bawah.
Jangan ragu untuk mengubah kunci untuk meletakkan apa pun yang mengapung perahu Anda; itu adalah kata yang harus diketik sebelum menekan tabuntuk memperluas cuplikan. Saya pergi dengan mixtend.
mixtend source.scss