Pengenalan Sass

Yang Anda harus tahu

Sebelum melanjutkan, Anda harus mempunyai pemahaman dasar tentang hal berikut:

  • HTML
  • CSS

Jika Anda ingin belajar topik ini terlebih dahulu, silakan kunjungi Halaman utama Buka tutorial ini.

Apa itu Sass?

  • Sass adalah Syntactically Awesome Stylesheet (tabel gaya yang sangat hebat)
  • Sass adalah ekstensi CSS
  • Sass adalah sejenis preprosesor CSS
  • Sass sepenuhnya kompatibel dengan semua versi CSS
  • Sass mengurangi pengulangan CSS, sehingga menghemat waktu
  • Sass dirancang oleh Hampton Catlin dan dikembangkan oleh Natalie Weizenbaum pada tahun 2006
  • Sass dapat diunduh dan digunakan secara gratis

Mengapa harus menggunakan Sass?

Tabel gaya semakin besar, semakin kompleks, dan semakin sulit untuk dipeeling. Ini adalah tempat preprosesor CSS dapat membantu.

Sass memungkinkan Anda menggunakan fitur yang tidak ada di CSS, seperti variabel, atur rule nesting, mixin, import, inheritance, fungsi bawaan, dan fitur lainnya.

Sebuah contoh sederhana yang sangat berguna tentang Sass

Dengan asumsi kita memiliki situs yang memiliki tiga warna utama:

#a2b9bc
#b2ad7f
#878f99

Jadi, berapa kali Anda perlu mengetik nilai HEX ini? Banyak kali. Apa jika warna yang sama berubah?

Anda dapat menulis kode berikut dengan Sass, bukannya mengetik nilai di atas beberapa kali:

Contoh Sass

/* Definisi variabel untuk warna asli */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Menggunakan variabel */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Jadi, saat menggunakan Sass, jika warna asli berubah, Anda hanya perlu mengubahnya di satu tempat.

Bagaimana Sass bekerja?

Browser tidak mengerti kode Sass. Oleh karena itu, Anda memerlukan preprosesor Sass untuk mengkonversi kode Sass ke CSS standar.

Proses ini disebut pemecahan (transpiling). Jadi, Anda perlu menyediakan kode Sass untuk pemecah (program), lalu dapatkan kode CSS kembali.

Petunjuk:Pemecahan adalah istilah yang digunakan untuk mengkonversi/mentranslasikan kode sumber yang ditulis dalam bahasa satu ke bahasa lain.

Jenis berkas Sass

Ekstensi berkas Sass adalah ".scss".

Komentar Sass

Sass mendukung komentar CSS standar /* komentar */dan selain itu, mendukung komentar dalam baris // komentar:

Contoh Sass

/* Definisi warna utama */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Menggunakan variabel */
.main-header {
  background-color: $primary_1; // Kamu dapat menambahkan komentar dalam baris ini
}