Pewarisan dalam SASS

Artikel ini menerangkan tentang pewarisan dalam SASS.

Kami akan menerangkan pewarisan dalam SASS dengan contoh praktikal.

YouTube Video

Pewarisan dalam SASS

Pewarisan dalam SASS (@extend) ialah satu mekanisme yang membolehkan anda menggunakan gaya daripada satu selektor kepada selektor lain tanpa penduaan. Oleh kerana gaya yang sama akan 'digabungkan' dan dihasilkan untuk pelbagai elemen di dalam markup, CSS yang dihasilkan menjadi kurang berlebihan; namun, jika digunakan secara tidak betul, ia boleh menyebabkan penggabungan selektor yang tidak diingini.

Asas: Cara menggunakan @extend

Di bawah ialah contoh asas di mana .btn--primary mewarisi gaya daripada .btn. @extend ialah arahan yang meluaskan selektor sasaran.

 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--primary mewarisi gaya asas .btn dan menukar hanya bahagian 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}

Amalan Terbaik: Menggunakan Pengganti (%placeholder)

Penentu tempat letak (%name) ialah penyeleksi yang tidak dihasilkan dalam CSS. Ia digunakan secara meluas terutamanya apabila anda ingin berkongsi gaya bersama secara selamat hanya untuk pewarisan di antara pelbagai 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}

• .card dan .panel kedua-duanya mewarisi daripada %card-base, membenarkan mereka berkongsi gaya umum sambil menambah perbezaan mengikut keperluan.

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 Berbilang (Pelbagai @extend)

Anda boleh mewarisi pelbagai pengganti atau kelas pada masa yang sama. Walaupun kebolehkitaran semula gaya bertambah baik, adalah penting untuk menjejaki peraturan mana yang digabungkan dengan penyeleksi 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 ialah contoh di mana butang mewarisi dua pengganti, satu untuk 'asas' dan satu lagi untuk 'saiz'.
• .btn--lg mewarisi kedua-dua %btn-base dan %btn-large, menggabungkan susun atur asas dengan saiz yang 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 (Mekanisma Penggabungan) dan Amaran Mengenai 'Letupan Selektor'

@extend menghasilkan semua selektor yang sepadan secara gabungan, yang kadangkala boleh menyebabkan kombinasi selektor yang tidak dijangka.

Contoh berikut menunjukkan bagaimana output boleh bertambah apabila kelas asas yang sama di-extend di pelbagai 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}

• Apabila pelbagai komponen mewarisi .utility, selektor digabungkan menjadi satu dan dalam projek berskala besar ini boleh menyebabkan CSS menjadi berlebihan.

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) — Keutamaan dan Kesan Sampingan

@extend boleh digunakan bukan sahaja pada kelas tetapi juga pada penyeleksi elemen. Walau bagaimanapun, memanjangkan elemen akan memperluaskan kawasan yang terlibat, sekaligus meningkatkan risiko peraturan digunakan secara tidak sengaja di tempat yang tidak diingini.

Di bawah ialah contoh melebar selektor elemen dan kesannya.

 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, pewarisan selektor elemen h1 menyebabkan .title digabungkan dengan gaya yang sama seperti h1.
• Walaupun ia kelihatan mudah untuk projek berskala kecil, apabila projek anda berkembang, peraturan untuk h1 boleh secara tidak dijangka digabungkan dengan .title, menjadikan gaya lebih rumit dan sukar diselenggara. Oleh itu, mereka bentuk gaya terutamanya berdasarkan kelas dan penentu tempat letak menjadikannya lebih mudah untuk diselenggara.

CSS yang dihasilkan

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

Kes Penggunaan untuk @extend dan !optional

Jika anda nyatakan !optional bersama @extend, anda boleh mengelakkan ralat apabila sasaran pewarisan tidak wujud. Ini amat berguna dalam kod seperti perpustakaan atau situasi di mana penentu tempat letak ditakrifkan secara bersyarat.

Berikut ialah contoh cubaan mewarisi kelas yang mungkin tidak wujud dengan selamat, 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-existing tidak wujud, tiada apa berlaku dan ia diabaikan. Anda boleh menggunakannya apabila ingin mencuba pewarisan dengan selamat.

CSS yang dihasilkan

1.component {
2  padding: 1rem;
3}

Perbandingan antara @extend dan Mixin (@mixin / @include)

@extend dan @mixin kadang-kadang mempunyai tujuan yang bertindih, tetapi output dan kegunaannya berbeza.

• @extend

  • CSS yang dihasilkan mengurangkan penduaan dengan menggabungkan selektor.
  • Kerana selektor digabungkan selepas dihasilkan, kombinasi tidak sengaja mungkin berlaku.
  • Parameter tidak boleh dihantar (tetapi ini boleh diatasi dengan menggabungkan pengganti).

• @mixin / @include

  • Setiap panggilan menggandakan gaya (mengakibatkan output yang berlebihan).
  • Anda boleh menghantar parameter dan memasukkan logik seperti syarat atau gelung.
  • Output lebih mudah dijangka, tetapi saiz fail bertambah.

Di bawah ialah perbandingan menggunakan kedua-dua @mixin dan @extend untuk melaksanakan gaya butang 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}

• @mixin membolehkan anda memasukkan gaya secara fleksibel, manakala @extend menggabungkan output dengan cekap, jadi anda boleh memilih mengikut kesesuaian.

CSS yang dihasilkan

Output daripada @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 daripada @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}

Garis Panduan Praktikal

Pewarisan SASS adalah ciri yang sangat berguna untuk meningkatkan kebolehkitaran semula gaya. Namun, penggunaan yang tidak betul boleh menjadikan penggabungan gaya menjadi rumit dan mengurangkan kemudahan penyelenggaraan. Berikut adalah beberapa perkara penting untuk menggunakan pewarisan dengan selamat dan berkesan.

• Gunakan penentu tempat letak untuk gaya komponen lazim seperti struktur dan susun atur. Selain itu, jika parameter dinamik diperlukan, anda boleh menggunakan @mixin.
• Anda harus mengelakkan daripada mewarisi elemen HTML seperti h1 secara terus. Gabungan penyeleksi yang tidak disengajakan mungkin berlaku, yang boleh menghasilkan CSS yang tidak dijangka.
• Menggunakan konvensyen penamaan seperti BEM atau awalan yang jelas untuk menunjukkan tujuan setiap pengganti membantu memastikan ia selamat.
• Lebih selamat untuk menggunakan @extend di dalam fail yang sama. Terutamanya dalam projek yang besar, adalah disyorkan untuk mereka bentuk pewarisan dalam skop setiap komponen bagi memudahkan penjejakan hubungan pewarisan.

Ringkasan

Ciri @extend dalam SASS merupakan cara yang mudah untuk mengulang guna gaya bersama dengan cekap dan memastikan konsistensi reka bentuk. Walau bagaimanapun, kerana gabungan penyeleksi boleh menjadi rumit dengan mudah, adalah penting untuk menggunakan ciri ini dengan berhati-hati dan dalam skop yang terhad. Dengan mengumpulkan gaya bersama menggunakan penentu tempat letak (%placeholder) dan menggunakan @mixin untuk bahagian yang memerlukan parameter dinamik, anda boleh mengekalkan reka bentuk yang ringkas dan mudah diselenggara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video