Apa itu SASS CSS dan Kegunaannya untuk Membuat Website

6

Apa itu SASS? SASS (Syntactically Awesome StyleSheets) adalah sebuah bahasa yang diadopsi dari CSS, namun dengan fitur yang lebih banyak yang dapat memudahkan designer atau developer membuat sebuah website.

SASS bukan merupakan pengganti dari CSS, namun SASS ini adalah tools yang membuat CSS menjadi lebih mudah.

Apa untungnya saya kalau pakai SASS?

SASS hadir untuk mempermudah designer ataupun developer dalam mendesain sebuah website. Istilahnya, dengan SASS ini kita bisa menggunakan fitur-fitur yang biasanya ada di bahasa pemrograman (seperti variable) di CSS.

Kalau begitu, ada fitur apa saja di SASS?

Nah, pertanyaan bagus! Fitur-fitur yang ada di SASS ada banyak, dan beberapa diantaranya sangat membantu kita

Variables

Apabila kamu sudah pernah membuat kode program sebelumnya, pastinya akan memahami apa itu variable. Dengan SASS, kita bisa menambahkan variable pada kode CSS.

Seperti contohnya, kita ingin menyimpan nama font yang kita gunakan di satu variabel, atau kita ingin menyimpan warna tulisan di dalam satu variabel. Nantinya kita akan bisa panggil langsung didalem kode yang lainnya

Manfaat dari adanya variable ini yaitu kode kita akan lebih bersih dan meminimalisir redudansi kode

Nesting

Untuk fitur nesting ini, kita bisa menulis CSS dengan sistem hierarki, jadi bisa kita susun sesuai tingkatannya. Ini sangat memudahkan kita, karena di CSS agak sulit untuk menulis seperti ini, dan akan banyak redudansi.

Partials

Partials sendiri adalah fitur dimana kamu bisa memanggil file-file scss secara terpisah. Perlu diingat, nama file harus diberikan karaketer _ pada depan file.

Contoh penggunaan partials
Contoh penggunaan partials

Import

Untuk memanggil file lainnya, terutama file partials, kamu bisa menggunakan perintah @import ‘nama_partials’;

Terus, apa perbedaan SASS dengan SCSS?

Perbedaan mendasar sebenarnya hanya dari cara menulisnya. Untuk SASS, kita tidak memakai kurung kurawal dan titik koma, sedangkan SCSS hampir mirip dengan CSS, menggunakan kuurung kurawal dan titik koma.

Saya pribadi lebih suka SCSS, karena identik dengan CSS dan lebih enak untuk dilihat

Gimana cara saya pakai SASS?

Ada banyak cara untuk memakai SASS, namun salah satu yang paling mudah yaitu menggunakan Koala.

Screen Shot 2016-06-28 at 12.49.58

Dengan Koala, kamu tidak perlu repot lagi dengan konfigurasi atau command line. Cukup download dan pilih project folder website kamu

Unduh Koala Gratis

 

  • http://muslih.me Muslih

    kalo boleh nambah nih fitur2 sass min ada mixin buat fungsi, dan extend buat penurunan class CMIIW ^^

    • http://galihpratama.net/ Galih Pratama

      Oh iya belum saya masukkan mas, saya sudah sering pakai kok mixin sama extend itu di project 🙂

  • panji negoro

    min mohon bimbingannya dalam menggunakan aplikasi koala :D,saya ingin belajar

    • http://galihpratama.net/ Galih Pratama

      Koala udah lama ga diupdate, tapi masih bisa dipake. Ada masalah ga mas? Hehe

  • prima

    wah bagus sekali tutorialnya sangat membantu. Prima Plastik mengerjakan pembuatan map raport , map ijazah , map sertifikat dan cover agenda. Info lengkap di : http://www.primaplastik.com dan http://www.mapraport.co.id

  • prima

    sass agak ribet saya lebih baik pakai boostrap tp tergantung masing2 sich hehe. Salam prima plastik spesialist map raport , map ijazah , map sertifikat dan cover agenda. Info lengkap di : http://primaplastik.com/map-raport/ atau di http://mapraport.co.id/