Pemilih Extend dan Placeholder

@extend memungkinkan satu selektor mewarisi semua gaya dari selektor lain. Alih-alih menggandakan kode, perluasan membuat sekumpulan aturan bersama dalam CSS yang dikompilasi.

Selektor pengganti (diawali dengan %) mendefinisikan blok gaya yang tidak pernah dikompilasi secara mandiri—hanya ketika diperluas. Selektor ini tidak menghasilkan CSS kecuali ada sesuatu yang memperluasnya.

Memperluas kelas nyata menambahkan seluruh konteks selektor kelas tersebut ke keluaran yang dikompilasi. Pengganti lebih bersih—hanya menghasilkan selektor yang dikelompokkan untuk selektor yang memperluasnya.

Ketika beberapa selektor memperluas pengganti yang sama, Sass mengelompokkannya menjadi satu aturan yang dipisahkan koma:

@extend memiliki beberapa keterbatasan penting:

• Tidak dapat digunakan di dalam kueri media
• Dapat menghasilkan selektor yang dikelompokkan secara tidak terduga dan berukuran besar ketika terjadi rangkaian perluasan
• Membuat CSS yang dikompilasi lebih sulit ditelusuri kembali ke berkas sumber

Perbandingan:

• @extend: CSS lebih kecil (aturan bersama), tetapi memiliki rangkaian selektor yang rumit dan keterbatasan pada kueri media
• @mixin: menggandakan deklarasi, tetapi lebih mudah diprediksi dan dapat digunakan di dalam kueri media

Dalam praktik Sass modern, mixin umumnya lebih disukai daripada @extend. HTTP/2 dan kompresi gzip membuat penggandaan deklarasi menjadi kurang penting, sementara kemudahan proses debug pada mixin lebih berarti daripada perbedaan minimal pada ukuran CSS.

@extend (dengan pengganti) tepat digunakan ketika:

• Beberapa selektor benar-benar berbagi keadaan semantik yang sama (misalnya, keadaan kesalahan)
• Anda tidak berada di dalam kueri media
• Gaya dasar stabil dan terdefinisi dengan baik

Pengganti cocok digunakan untuk kumpulan utilitas mirip reset yang diwarisi oleh beberapa komponen:

Beberapa panduan gaya dan tim melarang @extend sepenuhnya karena kerumitannya dan pembengkakan selektor yang dapat ditimbulkannya. Pahami perbandingannya dan ikuti konvensi tim Anda.

@extend memungkinkan sebuah selektor mewarisi gaya selektor lain dengan mengelompokkan selektor dalam CSS yang dikompilasi. Pengganti (%name) tidak menghasilkan apa pun sampai diperluas—lebih bersih daripada memperluas kelas nyata. Hindari @extend di dalam kueri media. Dalam Sass modern, mixin umumnya lebih disukai daripada @extend karena lebih mudah diprediksi dan di-debug.