Pewarisan dalam SASS
Artikel ini menjelaskan pewarisan dalam SASS.
Kami akan menjelaskan pewarisan dalam SASS dengan contoh praktis.
YouTube Video
Pewarisan dalam SASS
Pewarisan dalam SASS (@extend) adalah mekanisme yang memungkinkan Anda menerapkan gaya dari satu selektor ke selektor lain tanpa duplikasi. Karena gaya yang sama 'digabungkan' dan diterapkan pada beberapa elemen di markup, CSS yang dihasilkan lebih kecil kemungkinannya menjadi berlebihan; namun, jika digunakan secara tidak benar, dapat menyebabkan penggabungan selektor yang tidak diinginkan.
Dasar: Cara menggunakan @extend
Berikut adalah contoh dasar di mana .btn--primary mewarisi gaya dari .btn. @extend adalah direktif yang memperluas selektor target.
1// Base button styles
2.btn {
3 padding: 0.5rem 1rem;
4 border-radius: 4px;
5 border: 1px solid #ccc;
6 background: white;
7 color: #333;
8}
9
10/* Primary button extends the base .btn */
11.btn--primary {
12 @extend .btn;
13 background: #007bff;
14 color: white;
15}- Dengan menggunakan
@extend,.btn--primarymewarisi gaya dasar dari.btndan hanya menimpa bagian yang diperlukan.
CSS yang Dihasilkan
1.btn, .btn--primary {
2 padding: 0.5rem 1rem;
3 border-radius: 4px;
4 border: 1px solid #ccc;
5 background: white;
6 color: #333;
7}
8
9.btn--primary {
10 background: #007bff;
11 color: white;
12}Praktik Terbaik: Menggunakan Placeholder (%placeholder)
Selector placeholder (%name) adalah selector yang tidak dihasilkan ke dalam CSS. Selector ini banyak digunakan terutama ketika Anda ingin membagikan gaya umum dengan aman secara eksklusif untuk pewarisan di beberapa komponen.
1// %placeholder will not be output directly
2%card-base {
3 padding: 1rem;
4 border-radius: 6px;
5 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
6 background: #fff;
7}
8
9/* Components extend the placeholder */
10.card {
11 @extend %card-base;
12 border: 1px solid #eee;
13}
14
15.panel {
16 @extend %card-base;
17 border: 1px solid #ddd;
18}.carddan.panelkeduanya mewarisi dari%card-base, memungkinkan mereka berbagi gaya umum sambil menambah perbedaan sesuai kebutuhan.
CSS yang Dihasilkan
1.card, .panel {
2 padding: 1rem;
3 border-radius: 6px;
4 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
5 background: #fff;
6}
7
8.card {
9 border: 1px solid #eee;
10}
11
12.panel {
13 border: 1px solid #ddd;
14}Pewarisan Ganda (Banyak @extend)
Anda dapat mewarisi beberapa placeholder atau kelas secara bersamaan. Walaupun penggunaan ulang gaya meningkat, penting untuk melacak aturan mana yang digabungkan dengan selector yang mana.
1%btn-base {
2 display: inline-block;
3 padding: 0.5rem 1rem;
4 border-radius: 3px;
5}
6
7%btn-large {
8 padding: 0.75rem 1.5rem;
9 font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14 @extend %btn-base;
15 @extend %btn-large;
16 background: #222;
17 color: #fff;
18}- Ini adalah contoh di mana sebuah tombol mewarisi dua placeholder, satu untuk 'dasar' dan satu untuk 'ukuran'.
.btn--lgmewarisi keduanya,%btn-basedan%btn-large, sehingga mengombinasikan layout dasar dengan ukuran lebih besar.
CSS yang Dihasilkan
1.btn--lg {
2 display: inline-block;
3 /* %btn-large overrides the padding from %btn-base */
4 padding: 0.75rem 1.5rem;
5 border-radius: 3px;
6 font-size: 1.125rem;
7 background: #222;
8 color: #fff;
9}Perilaku @extend (Mekanisme Penggabungan) dan Kewaspadaan terhadap 'Selector Explosion'
@extend mengoutput semua selektor yang cocok digabungkan, yang kadang bisa menyebabkan kombinasi selektor yang tidak diinginkan.
Contoh berikut menunjukkan bagaimana output dapat meningkat ketika kelas dasar yang sama diperluas di banyak tempat.
1/* Many components extend .utility */
2/* A generic utility class */
3.utility {
4 margin-bottom: 1rem;
5}
6
7/* Nested selectors that extend .utility */
8.header {
9 @extend .utility;
10 .title {
11 font-weight: bold;
12 }
13}
14
15.footer {
16 @extend .utility;
17 .note {
18 color: #888;
19 }
20}
21
22.article {
23 @extend .utility;
24 .content {
25 line-height: 1.6;
26 }
27}
28
29.sidebar {
30 @extend .utility;
31 .section {
32 padding: 1rem;
33 }
34}- Ketika beberapa komponen mewarisi
.utility, selektor digabungkan menjadi satu dan, dalam proyek besar, ini bisa menyebabkan CSS membengkak.
CSS yang Dihasilkan
1.utility,
2.header,
3.footer,
4.article,
5.sidebar {
6 margin-bottom: 1rem;
7}
8
9.header .title {
10 font-weight: bold;
11}
12
13.footer .note {
14 color: #888;
15}
16
17.article .content {
18 line-height: 1.6;
19}
20
21.sidebar .section {
22 padding: 1rem;
23}@extend dan .class vs Selektor Elemen (Tag) — Prioritas dan Efek Samping
@extend dapat diterapkan tidak hanya pada kelas tetapi juga pada selector elemen. Namun, memperluas elemen akan memperbesar cakupan yang terpengaruh, meningkatkan risiko aturan diterapkan secara tidak sengaja di tempat yang tidak diinginkan.
Berikut adalah contoh memperluas selektor elemen dan dampak yang dapat terjadi.
1/* Extending an element selector (not recommended) */
2h1 {
3 font-size: 2rem;
4 margin-bottom: 0.5rem;
5}
6
7/* If you extend h1, the resulting selector will include your class with h1 */
8.title {
9 @extend h1;
10 color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/- Dalam contoh ini, mewarisi selektor elemen
h1menyebabkan.titledigabung dengan gaya yang sama sepertih1. - Meskipun kelihatannya praktis untuk kasus berskala kecil, saat proyek Anda berkembang, aturan untuk
h1bisa tiba-tiba digabungkan dengan.title, sehingga gaya menjadi lebih rumit dan mempersulit pemeliharaan. Oleh karena itu, merancang gaya yang berfokus pada kelas dan placeholder akan membuatnya lebih mudah untuk dipelihara.
CSS yang Dihasilkan
1h1,
2.title {
3 font-size: 2rem;
4 margin-bottom: 0.5rem;
5}
6
7.title {
8 color: #333;
9}Kasus Penggunaan untuk @extend dan !optional
Jika Anda menentukan !optional pada @extend, Anda dapat menyembunyikan error ketika target pewarisan tidak ditemukan. Hal ini sangat berguna dalam kode seperti pustaka atau dalam kasus di mana placeholder didefinisikan secara kondisional.
Berikut adalah contoh mencoba mewarisi kelas yang mungkin tidak ada secara aman menggunakan !optional.
1/* Try to extend a class that might not exist */
2.component {
3 @extend .maybe-existing !optional;
4 padding: 1rem;
5}- Jika
.maybe-existingtidak ada, tidak ada yang terjadi dan akan dilewati. Anda bisa menggunakannya saat ingin mencoba ekstensi dengan aman.
CSS yang Dihasilkan
1.component {
2 padding: 1rem;
3}Perbandingan @extend dan Mixin (@mixin / @include)
@extend dan @mixin kadang memiliki tujuan yang tumpang tindih, tetapi output dan kasus penggunaannya berbeda.
-
@extend- CSS yang dihasilkan mengurangi duplikasi dengan menggabungkan selektor.
- Karena selektor digabung setelah pembuatan, kombinasi yang tidak diinginkan dapat terjadi.
- Parameter tidak dapat diteruskan (meskipun ini bisa diatasi dengan mengombinasikan placeholder).
-
@mixin/@include- Setiap pemanggilan menggandakan gaya (mengakibatkan output berulang).
- Anda dapat meneruskan parameter dan menyertakan logika seperti kondisi atau perulangan.
- Output lebih dapat diprediksi, tetapi ukuran file meningkat.
Di bawah ini adalah perbandingan dengan menggunakan baik @mixin maupun @extend untuk mengimplementasikan gaya tombol yang sama.
1/* Mixin approach */
2@mixin btn-styles($bg, $color) {
3 display: inline-block;
4 padding: 0.5rem 1rem;
5 background: $bg;
6 color: $color;
7 border-radius: 4px;
8}
9
10/* Use mixin */
11.btn {
12 @include btn-styles(white, #333);
13}
14
15.btn--primary {
16 @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21 display: inline-block;
22 padding: 0.5rem 1rem;
23 border-radius: 4px;
24}
25
26.btn2 {
27 @extend %btn-base;
28 background: white;
29 color: #333;
30}
31
32.btn2--primary {
33 @extend %btn-base;
34 background: #007bff;
35 color: white;
36}@mixinmemungkinkan Anda menyisipkan gaya secara fleksibel, sedangkan@extendmengonsolidasikan output secara efisien; Anda dapat menggunakan keduanya sesuai kasus penggunaan.
CSS yang Dihasilkan
Output dari @mixin
1.btn {
2 display: inline-block;
3 padding: 0.5rem 1rem;
4 background: white;
5 color: #333;
6 border-radius: 4px;
7}
8
9.btn--primary {
10 display: inline-block;
11 padding: 0.5rem 1rem;
12 background: #007bff;
13 color: white;
14 border-radius: 4px;
15}Output dari @extend
1.btn2,
2.btn2--primary {
3 display: inline-block;
4 padding: 0.5rem 1rem;
5 border-radius: 4px;
6}
7
8.btn2 {
9 background: white;
10 color: #333;
11}
12
13.btn2--primary {
14 background: #007bff;
15 color: white;
16}Panduan Praktis
Pewarisan SASS adalah fitur yang kuat untuk meningkatkan penggunaan ulang gaya. Namun, penggunaan yang salah dapat membuat penggabungan gaya menjadi rumit dan mengurangi kemudahan pemeliharaan. Berikut adalah beberapa poin penting untuk menggunakan pewarisan secara aman dan efisien.
- Gunakan placeholder untuk gaya komponen bersama seperti struktur dan tata letak. Selain itu, jika diperlukan parameterisasi dinamis, Anda dapat menggunakan
@mixin. - Sebaiknya hindari mewarisi elemen HTML secara langsung seperti
h1. Kombinasi selector yang tidak diharapkan dapat terjadi, sehingga menghasilkan CSS yang tidak sesuai harapan. - Menggunakan konvensi penamaan seperti BEM atau awalan yang jelas untuk menunjukkan tujuan tiap placeholder membantu menjaga keamanan.
- Lebih aman menggunakan
@extenddi dalam file yang sama. Terutama dalam proyek besar, disarankan merancang pewarisan di dalam cakupan setiap komponen agar lebih mudah melacak hubungan pewarisannya.
Ringkasan
Fitur @extend pada SASS adalah cara yang efisien untuk menggunakan kembali gaya umum dan memastikan konsistensi desain. Namun, karena kombinasi selector dapat menjadi rumit, maka fitur ini perlu digunakan dengan hati-hati dan dalam cakupan yang terbatas. Dengan mengelompokkan gaya bersama menggunakan selector placeholder (%placeholder) dan menggunakan @mixin untuk bagian yang memerlukan parameter dinamis, Anda dapat mempertahankan desain yang sederhana dan mudah dipelihara.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.