Sass @extend dan Warisan

Perintah Sass @extend

Instruksi @extend perintah memungkinkan Anda untuk membagikan sekelompok properti CSS dari selector ke selector lain.

Jika Anda memiliki elemen yang hampir sama gaya tetapi hanya berbeda di beberapa detil kecil, maka Instruksi @extend perintah sangat bermanfaat.

Contoh Sass di bawah ini pertama-tama membuat gaya dasar untuk tombol (yang akan digunakan untuk sebagian besar tombol). kemudian, kami membuat gaya untuk tombol "Report" dan tombol "Submit". Tombol "Report" dan "Submit" melalui Instruksi @extend Perintah mendapatkan semua properti CSS dari kelas .button-basic. Selain itu, mereka juga mendefinisikan warna sendiri:

Buat bahasa SCSS:

.button-basic  {
  batas: tak ada;
  isi: 15px 30px;
  penyesuai-tekst: tengah;
  ukuran-font: 16px;
  pengecat: pointer;
}
.button-report  {
  @extend .button-basic;
  warna-latar: merah;
}
.button-submit  {
  @extend .button-basic;
  warna-latar: hijau;
  warna: putih;
}

Setelah dikompilasi, CSS akan seperti berikut ini:

Keluaran CSS:

.button-basic, .button-report, .button-submit {
  batas: tak ada;
  isi: 15px 30px;
  penyesuai-tekst: tengah;
  ukuran-font: 16px;
  pengecat: pointer;
}
.button-report  {
  warna-latar: merah;
}
.button-submit  {
  warna-latar: hijau;
  warna: putih;
}

Dengan menggunakan Instruksi @extend Anda tidak perlu menentukan beberapa kelas untuk elemen HTML, seperti:<button class="button-basic button-report">Laporkan Ini</button>. Anda hanya perlu menentukan .button-report untuk mendapatkan dua gaya.

Instruksi @extend Instruksi membantu mempertahankan kode Sass Anda sangat kering (DRY).