Get to Know SASS: Mengenal Sintaksis Dasar SASS

Mengenali cara penulisan SASS yang tidak dimiliki CSS. Mulai dari variabel, nesting, hingga mixin.

7 min readAug 13, 2021

Hello, Readers!

Pada artikel-artikel tentang SASS sebelumnya, I’ve shared about what is SASS and how to install SASS in local. And in this article, it’s time to practice how to use SASS and how to compile it to pure CSS! Langsung saja kita bahas…

Sebenarnya, sintaksis SASS memiliki dua format penulisan. Yaitu, dengan ekstensi .sassdan .scss. Jadi saat suatu file SASS dibuat, nama file-nya bisa example.sass atau pun example.scss. Sebenarnya apa sih perbedaannya? Mana ya yang lebih mudah untuk ditulis?

SASS vs. SCSS

Mengutip laman resmi sitepoint.com, SCSS atau Sassy CSS adalah suatu sintaks baru dari SASS yang muncul pada versi 3.0 yang keluar pada Mei 2010. Nah, jadi ternyata SCSS ini adalah versi ketiga dari SASS dengan penulisan sintaks yang berbeda dari versi-versi SASS sebelumnya. Perbedaan yang paling mendasar dari sintaks SASS dan SCSS terlihat jelas pada kurung kurawal dan titik komanya. SASS tidak menggunakan titik koma dan juga kurung kurawal pada penulisannya untuk mendefinisikan suatu selector CSS. SASS hanya mengandalkan indentasi (tab) sedangkan SCSS menggunakan kurung kurawal untuk mendefinisikan suatu selector CSS.

Agar lebih jelas, langsung saja kita lihat perbedaan sintaks dari SASS dan SCSS. Berikut ini adalah sintaksis dari SCSS:

h1 {
  font-size: 2rem;
  font-color: grey;
  .container {
    width: 900px;
    margin: 0 auto;
    text-align: center;
  }
}

Kode tersebut bila ditulis dengan sintaksis SASS akan menjadi seperti berikut:

h1
  font-size: 2rem
  font-color: grey
  .container
    width: 900px
    margin: 0 auto
    text-align: center

Secara penulisan dan efektivitas, sintaks SASS terlihat lebih clean dibanding dengan sintaks SCSS, struktur kode SASS juga mirip dengan Python yang juga sensitif terhadap indentasi. Namun, bagi para web designer yang tebiasa menggunakan CSS, sepertinya sintaks SCSS akan lebih mudah untuk dipahami karena struktur penulisannya sangat mirip dengan kode CSS.

So, pada artikel kali ini, saya akan membahas tentang fitur-fitur yang sering dipakai pada SASS dengan gaya penulisan yang mirip dengan CSS agar lebih mudah. Yup, Dengan sintaksis SCSS. Let’s get started!

Nesting

Fitur pertama yang sangat berguna adalah nesting. Dengan adanya fitur ini, kita bisa menulis suatu selektor di dalam selektor lainnya atau dengan kata lain selektor-selektor tersebut bisa memiliki hubungan parent and child.

Contoh penerapan fitur nesting pada SASS adalah sebagai berikut:

main {
  text-align: center;
  .container {
    width: 80%;
    margin: 0 auto;
    h1 {
      font-size: 1.5rem 
    }
  }
}

Kode tersebut jika di-compile menjadi kode CSS akan menjadi seperti ini:

main {
  text-align: center;
}main .container {
  width: 80%;
  margin: 0 auto;
}main .container h1 {
  font-size: 1.5rem;
}

Nah, bagaimana? Terbayang kan mudahnya jika kita ingin mengubah font-size dari tag h1 di kelas container dan tag main? Kita tinggal cari saja parent dari selector yang akan kita ubah, kemudian kita hanya tinggal fokus mencari selector yang ada di parent itu. Tidak perlu lagi scanning seluruh kode CSS kita untuk menemukan satu selector. Fitur ini sangat berguna untuk me-maintain kode-kode CSS kita yang semakin kompleks.

Selain itu, kita juga bisa membuat selector:hover menjadi lebih singkat di dalam satu parent dengan menulis &:hover. Simbol & akan mewakili selector parent-nya. Contohnya seperti ini:

a {
  display: inline-block;
  &:hover {
    font-style: italic;
  }
}

Kode di atas akan sama dengan kode CSS berikut:

a {
  display: inline-block;
}a:hover {
  font-style: italic;
}

Variable

Fitur lain yang tak kalah keren, di SASS kita bisa menginisialisasi suatu variabel layaknya bahasa pemrograman. Kita dapat memasukkan suatu value ke dalam variabel tersebut dan menggunakannya berkali-kali. Untuk menginisialisasi suatu variabel, kita bisa mengetikkan sintaks $nama-variabel: nilai; . Contoh penggunaan variabel pada SASS adalah sebagai berikut:

// Inisialisasi variabel
$primary-color: #26546a;
$h1-color: rgba(0, 0, 0, 0.8);main {
  text-align: center;
  color: $primary-color;
  .container {
    width: 80%;
    margin: 0 auto;
    h1 {
      font-size: 1.5rem; 
      color: $h1-color;
    }
  }
}

Nah, dengan adanya suatu variabel yang menyimpan nilai tertentu, kita bisa menggunakannya langsung ke berbagai selector. Jika ternyata kita ingin menggantinya pun akan lebih mudah, hanya perlu mengganti nilai dari variabelnya, tidak perlu mengubah nilai di semua selector. Fitur variabel ini membuat proses coding CSS kita jadi lebih efisien dan cepat.

Mixin

Fitur lain dari SASS yang dapat menjadikan proses coding CSS kita menjadi lebih singkat adalah mixin . Fitur ini menjadikan SASS menjadi terlihat semakin mirip dengan bahasa pemrograman. Jika di bahasa pemrograman kita bisa mendefinisikan suatu fungsi yang bisa dipanggil kembali di mana pun, di SASS kita punya mixin . Fitur ini mirip sekali dengan fitur function di bahasa pemrograman. mixin juga dapat mengambil suatu argument untuk di pakai di dalam lingkup kodenya sendiri layaknya function. Selain mixin yang mirip dengan function, ternyata SASS juga memiliki fitur function loh. Wah! keren bukan? So, without any fuss or delay, let me show you how mixin works and help us to code faster.

Misalnya kita memiliki 3 buah div dengan class box-1 , box-3 , dan box-3 . Kita ingin membuat ketiga class itu memiliki warna yang berbeda, namun dengan ukuran yang sama. Okay, it’s clear enough. Mari buat kode CSS-nya.

.box-1 {
  display: inline-block;
  width: 100px;
  margin: 20px;  
  color: white;
  background-color: darkred;
}.box-2 {
  display: inline-block;
  width: 100px;
  margin: 20px;    
  color: white;
  background-color: darkgrey;
}.box-3 {
  display: inline-block;
  width: 100px;
  margin: 20px; 
  color: white;
  background-color: darkblue;
}

Hufttt… Sepertinya cukup panjang ya. Coba sekarang kita coba menggunakan fitur mixin di SASS.

@mixin box($color) {
  display: inline-block;
  width: 100px;
  margin: 20px;
  color: white;
  background-color: $color;
}.box-1 {
  @include box(darkred);
}.box-2 {
  @include box(darkgrey);
}.box-3 {
  @include box(darkblue);
}

Nah, terlihat lebih singkat bukan? Jadi kita hanya perlu mendefinisikan mixin box satu kali. Untuk mendefinisikan mixin, kita perlu menulis kode@mixin mixin-name(argument) { }. Lalu, untuk memanggil mixin yang telah didefinisikan kita perlu menambahkan kode @include mixin-name(argument); di selector yang kita inginkan. Benar-benar mirip seperti function di bahasa pemrograman ya…

Import

SASS ternyata juga mendukung fitur import layaknya bahasa pemrograman. Dengan fitur ini, kita dapat memisahkan kode-kode ke suatu file yang berbeda berdasarkan fungsinya masing-masing. Fitur import ini bisa memanggil suatu variabel hingga mixin dari file SASS lainnya.

Agar suatu file SASS dapat di-import, kita harus menambahkan _ di awal nama file SASS-nya. For the example _mixin.scss . Lalu, untuk meng-import file SASS tersbut, kita perlu menambahkan kode @import "_mixin.scss” atau @import "mixin" jika file yang kita import berada di direktori yang sama dengan file utama kita.

Misalnya kita memiliki satu file SASS dengan nama _variables.scss seperti ini:

// _variables.scss$facebook-color: #4267B2;
$twitter-color: #1DA1F2;
$linkedin-color: #0077b5;

Lalu, kita ingin menggunakan variabel $facebook-color di file _footer.scss . Maka kita harus meng-import terlebih dahulu file _variables.scss seperti berikut:

// _footer.scss
@import "variables";footer {
  background-color: $facebook-color;
  width: 100%;
  height: 80px;
  p {
    font-size: 13px;
  }
}

Nah, dengan begitu kita dapat memakai suatu variabel yang telah didefinisikan di file lain.

Selain itu, kita juga bisa meng-import file _footer.scss ini ke file utama kita. Misalnya kita memiliki file utama dengan nama stylesheet.scss . Jika kita ingin menggunakan selector footer yang ada di file _footer.scss . Kita tinggal meng-import-nya ke file utama kita seperti berikut:

// stylesheet.scss
@import "footer";

Tara! selector footer yang ada di file _footer.scss telah berhasil di-import.

Compiling SASS into CSS

As I explained in the previous article, kita tidak bisa langsung memakai file SASS untuk menjadi style sheets utama kita karena browser hanya “memahami” file murni CSS sebagai style sheets HTML. Maka, jika kita ingin menggunakan file SASS ini, kita harus mengkompilasi atau menerjemahkannya ke dalam kode CSS.

Untuk bisa melakukan hal itu, pertama-tama kita harus meng-install SASS di local environment kita. You can check my previous article about how to install SASS here.

Jika SASS telah ter-install. Bukalah cmd (Windows) atau terminal (Mac/Linux), masuk ke direktori file tempat file SASS-mu dibuat, dan ketikkan kode berikut:

sass sass-filename.scss css-filename.css

Misalnya, kita akan meng-compile file stylesheet.scss yang telah dibuat di atas. Berikut ini command line-nya.

Setelah prosesnya selesai, kita dapat langsung cek di direktori tempat kita meng-compile file SASS-nya.

Tara!!! file SASS kita telah diterjemahkan ke CSS. Nah, file CSS hasil kompilasi ini bisa kita pakai di file HTML kita.

Selain file CSS yang keluar sebagai output kompilasi SASS, terdapat file stylesheet.css.map juga. File ini berisi beberapa deskripsi dari proses kompilasi yang telah dijalankan, seperti versi dari SASS, sources apa saja yang kita pakai (import), hingga nama file output hasil kompilasi file SASS.

Closing

Okay, mungkin itu saja fitur-fitur SASS yang sering digunakan menurut versi saya. I hope this article is useful for all of you. Jika kalian ingin memahami lebih lanjut fitur-fitur apa lagi yang terdapat dalam SASS, kalian dapat mengunjungi langsung dokumentasi resmi dari SASS di sini. If there is a mistake in this article, you can correct it down below on the comment section, I really happy for that. Jangan lupa untuk tetap bahagia dan terus semangat mengejar mimpi-mimpi kalian.

Thanks for reading and see ya!