Untuk membangun website dibutuhkan CSS. Namun, kode CSS semakin besar dan kompleks. Kodenya susah diatur dan dipelajari. Maka dari itu, Sass dianggap sebagai solusi untuk membantu sehingga sangat cocok untuk kamu seorang pemula web developer.

Sass merupakan singkatan dari Syntactically Awesome Style Sheets. Pengertiannya adalah ekstensi CSS yang memungkinkan kamu menggunakan hal-hal seperti variabel, aturan bersarang, impor sebaris dan banyak lagi. Ini juga membantu menjaga segala sesuatunya tetap teratur dan memungkinkan membuat lembar gaya lebih cepat. Sass kompatibel dengan semua versi CSS. Satu-satunya persyaratan untuk menggunakannya adalah harus menginstal Ruby.

Sass bukan bahasa pemrograman namun Sass adalah bahasa yang akan membuat CSS. Sass memberikan fitur yang tidak dimiliki CSS seperti variabel, nesting, mixins, inheritance. Fitur-fitur di dalam Sass membuat penggunanya menulis kode CSS yang lebih rapi dan bersih dan juga menghindari penulisan kode yang berulang.

Instalasi Sass

Ada beberapa cara dalam menginstall Sass. Berikut langkahnya seperti dilansir dari petanikode.com:

Menggunakan Node Package Manager (NPM)

[sudo] npm install -g sass

Catatan: jika kamu menginstal nodejs di root, menggunakan sudo. Tapi kalau menginstal di home, tidak perlu pakai sudo.

Menggunakan Chocolatey Package Manager (Windows)

choco install sass

Menggunakan Brew (Mac OS X)

brew install sass/sass/sass

Setelah itu, coba ketik perintah sass –version untuk memeriksa versi SASS yang terinstall.

Berikut ini adalah sejumlah fitur-fitur dari Sass dikutip dari creativebloq.com:

Syntax

Ada dua opsi syntax di Sass, yaitu SCSS dan Sass. Perbedaan dari syntax SCSS dan syntax Sass adalah pada penggunaan tanda kurung dan tab. Selain itu, SCSS menggunakan ekstensi .scss, sehingga sangat kompatibel dengan syntax dari CSS. Sedangkan Sass menggunakan ekstensi .sass dan tidak menggunakan kurung kurawal serta titik koma untuk mendefinisikan format dokumennya sehingga tidak mengikuti format dasar CSS. Tetapi jangan khawatir, karena kedua format tersebut bisa diubah ke format lainnya menggunakan command sass-convert.

Variables

Sass memungkinkan kamu untuk menyimpan variabel seperti bahasa pemrograman lainnya. Fungsi dari variabel di Sass adalah untuk menyimpan informasi atau nilai yang bisa kamu gunakan di style sheet. Nilai tersebut bisa berupa nilai properti, angka, teks, ukuran elemen, dan lain-lain. Contohnya ketika kamu ingin mengubah warna tampilan teks di website-mu. Menggunakan Sass, kamu bisa menyimpan variabel warna di atas dokumen dan menggunakan variabel tersebut untuk mengatur warna elemennya.

Nesting

Fungsi nesting di Sass adalah untuk mengurangi jumlah kode yang harus kamu tulis. Pada dasarnya, nesting berguna untuk menyimpan CSS selector agar meniru hierarki HTML-mu. Tetapi perlu diingat, bila menggunakan nesting dengan sembarang akan membuat CSS overqualified.

Partial

Partial adalah file Sass yang lebih kecil yang dapat diimpor ke file Sass lainnya. Pikirkan sebagian sebagai cuplikan kode. Dengan cuplikan kode ini, CSS sekarang dapat menjadi modular dan lebih mudah dirawat. Sebagian ditunjuk seperti itu dengan menamainya dengan garis bawah utama: _partial.scss.

Import

Memungkinkan kamu untuk mengimpor file parsial ke file saat ini, untuk membangun satu file CSS. Perhatikan berapa banyak impor yang  digunakan sebagai permintaan HTTP yang akan dibuat untuk masing-masing impor.

Mixins

Salah satu keuntungan menggunakan preprocessor adalah kemampuannya untuk mengambil kode yang rumit dan bertele-tele dan menyederhanakannya. Di sinilah mixins berguna! Misalnya, jika kamu perlu menyertakan awalan vendor, kamu dapat menggunakan mixins sebagai gantinya.

Extend/Inheritance

Fitur ini memungkinkan kita untuk berbagi beberapa properti dengan selektor yang lain. Kita harus menggunakan direktif @extend untuk mengambil properti dari selektor yang membagikannya. Semua selektor dalam Sass dapat membagikan propertinya secara default. Dengan Sass seorang web developer bisa membuat proses CSS dengan mudah, melakukan proses maintenance CSS di websitenya, mendesain website dengan cepat karena kepraktisannya. Nah semoga membantu bagi kamu yang ingin memulai sebagai seorang web developer. Untuk bisa belajar memang bisa di mana saja dan kapan saja. Namun, apabila ingin menjadi seorang profesional ada baiknya kamu mempertimbangkan kuliah di bidang yang relevan.

Institut Bisnis dan Teknologi Indonesia (INSTIKI) merupakan Kampus IT di Bali yang memiliki program Studi Teknik Informatika yang bisa menjadi pilihan bagi kamu yang ingin menjadi seorang web developer profesional. INSTIKI yang merupakan Kampus Swasta di Bali ini juga memiliki program studi Sistem Komputer. Oleh sebab itu, sangat cocok bagi kamu yang ingin menjadi profesional di bidang IT. Tunggu apalagi mari bergabung menjadi bagian dari INSTIKI yang merupakan Kampus IT Terpopuler di Bali. 

INSTIKI yang terdahulu dikenal dengan STIKI Indonesia, kini telah bertransformasi menjadi Institut Bisnis dan Teknologi Indonesia (INSTIKI). INSTIKI adalah kampus IT, bisnis, dan desain terbaik di Bali dan Nusa Tenggara yang terakreditasi nasional dan tersertifikasi internasional.

INSTIKI adalah kampus swasta di Bali yang membuka 4 program studi unggulan yakni Teknik Informatika, Sistem Komputer, Desain Komunikasi Visual, dan Bisnis Digital. Biaya kuliah di INSTIKI sangatlah terjangkau! Tertarik untuk kuliah di Bali alias melanjutkan studi di INSTIKI? Dapatkan informasi lebih lengkap tentang INSTIKI dan jurusan INSTIKI dengan mengakses https://instiki.ac.id/apply-now/