Belajar SASS Dasar (Extend atau Inheritance)

Dengan menggunakan @extend kita dapat berbagi sekumpulan properti CSS untuk properti lainnya. Kita dapat menghemat waktu ketika harus menulis beberapa property yang sama, seperti label, link-navigasi dll.

Daftar Isi:

• Apa itu SASS dan Cara Menggunakannya
• Variables dan Tipe Data
• Nesting
• Partials and Import
• Mixins and Include
• Inheritance
• Operators

Misal pada class label yang memiliki property font-size dan padding yang sama, namun memiliki beberapa karakter warna pada font-nya.

%label-message {
  padding: 5px 10px;
  font-size: 15px;
}
.label-success {
  @extend %label-message;
  color: green;
}
.label-error {
  @extend %label-message;
  color: red;
}
.label-warning {
  @extend %label-message;
  color: yellow;
}

Dengan script diatas, kita dapat menghasilkan kode CSS seperti ini.

.label-warning, .label-error, .label-success {
  padding: 5px 10px;
  font-size: 15px;
}
.label-success {
  color: green;
}
.label-error {
  color: red;
}
.label-warning {
  color: yellow;
}

Seperti janji yang ditawarkan SASS, membantu penulisan kode CSS lebih dinamis.

Apakah Ada Hubungannya dengan Mixins?

Sekilas sedikit mirip dengan mixins, namun pada extend tidak dapat mengirim argumen.

Extend hanya mewarisi property saja (Inheritance).

.awesome {
    width: 100%;
    height: 100%;
}
.stuff {
    @extend .awesome;
}
.highlight {
    @extend .awesome;
}

Hasil compile CSS:

.awesome, .highlight, .stuff {
  width: 100%;
  height: 100%;
}

Kesimpulan

@mixin dan @extend memiliki pro dan kontra, yang harus kita ketahui bahwa masing-masing memiliki kegunaan pada use case dilingkungan kerja kita.

Akhir kata, jika ada pertanyaan atau apapun terkait tulisan ini, feel free untuk kontak saya melalui sosial media, saya sangat terbuka untuk diskusi jika memang saya mampu menjawab pertanyaanya.