Pengenalan Sass

Yang Anda seharusnya tahu

Sebelum melanjutkan, Anda seharusnya memiliki pemahaman dasar tentang hal berikut:

  • HTML
  • CSS

Jika Anda ingin belajar subjek ini terlebih dahulu, silakan kunjungi Halaman utama Buka tutorial ini di atas.

Apa itu Sass?

  • Sass mengacu pada Syntactically Awesome Stylesheet (tableau de style incroyable)
  • Sass adalah ekstensi CSS
  • Sass adalah pemroses pralaman 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 percuma

Mengapa menggunakan Sass?

Laporan gaya semakin besar, semakin kompleks, dan semakin sulit untuk dipekerjaan. Ini adalah tempat pemroses pralaman CSS dapat membantu.

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

Contoh sederhana yang sangat berguna tentang Sass

Dengan asumsi kami memiliki laman web dengan 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 menggunakan Sass, daripada mengetik nilai di atas beberapa kali:

Sass Contoh

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

Jadi, dalam penggunaan Sass, jika warna asli berubah, Anda hanya perlu mengubahnya di satu tempat.

Bagaimana Sass bekerja?

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

Proses ini disebut pemenuhan (transpiling). Jadi, Anda perlu menyediakan kode Sass kepada pemenuhan (program), lalu dapatkan kembali kode CSS.

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

Jenis Fail Sass

Ekstensi fail Sass adalah ".scss".

Komen Sass

Sass mendukung komen standar CSS /* komen */dan juga mendukung komen dalam baris // komen:

Sass Contoh

/*definisi warna utama*/
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/*gunaan variable*/
.main-header {
  background-color: $primary_1; // Anda boleh menambahkan komen di sini
}