Panduan SASS Lengkap Berbahasa Indonesia

SASS (Syntactically Awesome Stylesheet) adalah bahasa premograman pre-prosesor CSS, yang dapat membantu penulisan CSS agar lebih efisien.

Daftar Isi:

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

Seperti bahasa lain, SASS memiliki fitur-fitu seperti variable, mixins, pengulangan, pengkondisian dan lain-lain. Dengan fitur-fitur yang dimiliki SASS kita dapat membuat kode CSS lebih mudah dan terstruktur.

CSS adalah bahasa yang mudah dibuat, namu susah untuk di maintenance ketika ada bug karena harus mencari kode dalam satu halaman yang berisi ribuan baris kode.

Dengan Bantuan SASS kita dapat memisahkan CSS kedalam file-file partisi sesuai kegunaannya, misal untuk button, form, header, dll. Sehingga project kita lebih mudah saat di maintenance dan scalable.

Kenapa SASS ?

• Bahasa pre-processing yang menyediakan indented syntax (sintaksnya sendiri) untuk CSS.
• Menyediakan beberapa fitur, yang digunakan untuk membuat stylesheet yang memungkinkan penulisan kode lebih efisien dan mudah maintenance.
• Kumpulan super CSS, yang artinya berisi semua fitur CSS dan merupakan pre-processing open source, dibuat diatas bahasa Ruby.
• Memungkinkan dokumen CSS dalam format yang baik dan terstruktur dibanding CSS yang langsung ditulis.
• Fungsi yang kita buat dapat digunakan kembali, logic statements dan beberapa built-in functions seperti manipulasi warna, operasi matematika dan masih banyak lagi.

Install SASS

Ada banyak aplikasi keren yang dapat membantu kita menjalankan Sass dalam beberapa klik. Seperti Compass, Koala, ataupun Scout-App.

Namun yang kita bahas disini adalah menggunakan command line saja agar lebih simpel. Tepatnya dengan bantuan NodeJS, soo buat temen2 yang belum install NodeJS silahkan install dulu disini.

Jika sudah install NodeJS silahkan ketikan perintah ini di CMD atau terminal.

npm install -g sass

Code and Format

Dalam bahasa SASS terdapat 2 type format, *.sass dan *.scss. Jadi begini:

SCSS

$font-general: Helvetica, sans-serif;
$dark-color: #111;

body {
  font: 100% $font-general;
  color: $dark-color;
}

SASS

$font-general: Helvetica, sans-serif
$dark-color: #111

body
  font: 100% $font-general
  color: $dark-color

Output CSS-nya sama kok.

body {
  font: 100% Helvetica, sans-serif;
  color: #111;
}

Keliatan kan bedanya? .SCSS pendekatan CSS-nya lebih baik sedangkan .SASS jauh lebih simpel. Silahkan tentukan ya mau gimana.

Saya sendiri lebih memilih .SCSS karena di code editor lebih cantik dilihat ketimbang .SASS (saya sudah coba keduanya).

Compiling

Tentu sebagai bahasa pre-prosesor membutuhkan proses compile untuk menghasilkan kode yang siap pakai dengan format .CSS.

sass foldersass/style.scss foldercss/style.css

Berarti setiap perubahan harus di compile dong?

Oh tentu tidak dong, ada banyak tools untuk otomasi proses ini, kita bisa menggunakan Gulp, untuk jelasnya bisa cek repository saya di Github.

Kesimpulan

SASS adalah bahasa yang digunakan untuk membangun kode CSS, jadi salah kalo ada pemikiran bahwa “SASS sebagai pengganti CSS”.

Kita akan tetap menggunakan format CSS hasil compile sebagai produk akhir dari project ini.

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.