Ketika kita membuat website pastinya kita menggunakan CSS untuk styling halaman website kita. Pernahkah mengalami CSS yang kita gunakan begitu banyak, kompleks dan sulit untuk melakukan maintenance?

Untuk hal ini, Sass bisa menjadi solusinya.

Apa itu Sass? Sass (Syntactically Awesome Style Sheets) merupakan Preprocessor CSS. Preprocessor CSS adalah framework yang menyediakan fitur-fitur yang tidak terdapat pada CSS. Fitur-fitur tersebut banyak mengadopsi konsep-konsep pemograman seperti operasi matematika dasar, variabel, loop dan fungsi.

Sass memiliki dua syntax yaitu Sass dan SCSS.

Untuk kali ini kita akan menggunakan syntax scss karena lebih mudah untuk dipelajari.

Cara kerja dari Sass itu sendiri adalah kita menuliskan code pada file dengan ekstensi .sass atau .scss, kemudian kita masukkan suatu perintah pada terminal atau command prompt, setelah itu code yang kita tuliskan tadi akan diterjemahkan ke dalam struktur CSS dan menghasilkan file CSS yang siap untuk kita gunakan di HTML.

Untuk mengkompile file Sass kedalam CSS kita bisa menggunakan command promt Ruby atau Node JS. agar lebih mudah di Ruby kita menggunakan Compass, Jika di Node JS kita bisa menggunakan Grunt atau Gulp. Pada tutorial kali ini kita akan menggunakan Ruby dan Compass.

Install Ruby

Untuk menginstall Ruby dapat mendownload pada link ini http://www.ruby-lang.org/en/downloads/ atau juga bisa di link ini http://railsinstaller.org/en (berisi packages Ruby, Rails, Bundler, Git, dll). Kita membutuhkan command promt dari Ruby untuk mengcompile sass ke css.

Install Compass

  • Buka command promt Ruby. Lalu masukkan perintah gem install compass.

  • Setelah itu untuk mengecek apakah sudah terinstall masukkan perintah compass -v.

Membuat Project Sass Sederhana dengan Compass

  1. Tentukan dimana akan membuat project. Contoh saya memilih direktori C:\Users\zithron\code\>. Untuk ke direktori tersebut masukkan perintah cd users/zithron/code, karena sekarang ini berada kita berada di C:\> pada command promt Ruby.
  2. Setelah itu untuk membuat project sass masukkan perintah compass create sass-dengan-compass. Maka akan menghasilkan folder bernama sass-dengan-compass yang didalamnya ada foder sass, stylesheets, dan file config.rb. Di dalam folder sass terdapat file ie.scss, print.scss, dan screen.scss. Di dalam stylesheets terdapat file ie.css, print.css, dan screen.css. Jadi compass akan mengcompile file berekstensi .scss yang ada di folder sass menghasilkan file yang berekstensi .css yang ada di folder stylesheets.
  3. Carilah file sass-dengan-compass. Lalu bukalah denggan text editor yang anda memiliki. Saya menggunakan Sublime Text 3.
  4. Buat file style.scss pada folder sass. Lalu copy code berikut ini
  5. Setelah itu masuk lagi ke command promt Ruby. Sekarang ini kita berada di direktori C:\Users\zithron\code>. Maka masuk terlebih dahulu ke direktori sass-dengan-compass. Masukkan perintah cd sass-dengan-compass.
  6. Untuk melakukan compile style.scss yang kita buat di folder sass sehingga menghasilkan file style.css yang berada di folder stylesheets maka masukkan perintah compass compile. Maka akan muncul write stylesheets/style.css yang berarti style.scss sudah kita compile ke dalam style.css di folder stylesheets.
  7. Berikut ini hasilnya yaitu file style.css yang ada di folder stylesheets
  8. Agar setiap kali kita mengupdate file style.scss tidak mengetikkan perintah compass compile, maka yang kita lakukan adalah mengetikkan perintah compass watch. Tetapi perubahan yang kita lakukan pada style.scss harus di save terlebih dahulu. Dengan compass watch, jika kita melakukan kesalahan dalam penulisan syntax maka otomatis juga akan diberitahu.
  9. Untuk menghilangkan comment yang ada di file style.css pada folder stylesheets, yang harus dilakukan adalah membuka file config.rb dan hilangkan tanda # pada # line_comments = false.

Kesimpulan:

CSS yang kita tulis saat membuat styling pada website bisa jadi akan bertambah banyak, kompleks dan sulit untuk melakukan maintenance, untuk itu Sass bisa menjadi solusinya. Saas perlu dicompile ke dalam css agar bisa kita gunakan pada HTML, untuk mengcompilenya bisa menggunakan compass pada command promt Ruby.

 

Referensi

http://sass-lang.com/
http://compass-style.org/
http://ambercat.rahmanda.net/design/2015/05/05/sass-dengan-gulp.html
https://www.google.com/search?q=sass+css+scss&client=firefox-b-ab&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjc27mPtqjTAhVTNrwKHYNmDvkQ_AUICSgC&biw=1366&bih=659#imgrc=FsAybL1IxsheLM: