Cara Install SASS dan Compass Secara Manual

Bagi yang belum mengetahui apa itu SASS dan Compass, silakan baca artikel Apa Itu SAAS dan Compass

SASS merupakan package dari Ruby, sehingga untuk menginstallnya kita perlu menginstall ruby, untuk menginstall Ruby di windows, sudah tersedia installernya, tinggal kita download di http://rubyinstaller.org/ pada saat artikel ini ditulis, Ruby yang terakhir versi 2.1.5. pada saat proses install jangan lupa centang bagian Add Ruby executables to your PATH agar dapat diakses melaui command promt.

install_ruby
Gambar 1

Setelah Ruby terinstall, jalankan command promt (tidak harus administrator) arahkan cursor ke direktori dimana ruby terinstall, misal sebelumnya kita install ruby di direktori C:\Ruby21 maka kita ketikkan cd C:\Ruby21 tekan enter (gambar 2).

Selanjutnya, terdapat dua cara untuk menginstall SASS, cara yang paling mudah adalah secara online, karena semua dependency (package terkait) akan terinstall, untuk melakukannya kita tinggal menjalankan perintah

gem install sass

demikian juga ketika menginstall compass, kita tinggal jalankan perintah

gem install compass

Mudah kan? Namun, pada kenyataannya tidak semua berjalan mulus, banyak juga yang mengalami error seperti ini:

error_install_sass
Gambar 2

Error tersebut dikarenakan kita mengakses koneksi SSL (https) https://rubygems.org, error tersebut dapat diatasi dengan mengubah akses ke protokol http (http://rubygems.org) dengan perintah gem sources -a http://rubygems.org, namun cara yang menurut saya lebih mudah adalah mendownload file sass yang berada di https://rubygems.org/gems/sass/, lihat ke pojok kanan bawah ada link download yang mengarah ke versi terakhir dari sass yang ketika tulisan ini ditulis sudah mencapai versi 3.4.12.

Setelah didownload, letakkan file tersebut di direktori instalasi ruby yang pada contoh ini C:\Ruby21, seperti gambar dibawah ini:

file_sass
Gambar 3

setelah itu ketikkan kembali perintah

gem install sass

tunggu beberapa saat hingga proses instalasi selesai, conoh tampilan pada command promt adalah sebagai berikut:

sukses_install_sass
Gambar 4

Sampai disini kita sudah dapat menggunakan SAAS, selanjutnya jika kita ingin menginstall compass, dapat dilakukan dengan cara yang sama, namun agak ribet, karena compass memiliki banyak dependency, jika berhasil install secara online, maka dependency tersebut akan didownload dan diinstall secara otomatis, namun untuk install secara manual, dipendency tersebut juga harus diinstall secara manual. Berikut langkah – langkahnya:

  1. Download Ruby Development Kit di http://rubyinstaller.org/downloads/ dan ekstrak, misal ke C:\RubyDevKit
  2. Melalui comman promt pindah cursor ke direktory RubyDevKit dengan menjalankan perintah cd C:\RubyDevKit, selanjutnya jalankan perintah ruby dk.rb init kemudian ruby dk.rb install seperti gambar dibawah:
    install_rubydevkit
  3. Download compass dan file dependency nya, sampai dengan tulisan ini ditulis, file yang diperlukan adalah:

    Copy semua file ke direktory ruby, dalam contoh ini C:\Ruby21, seperti gambar berikut:
    compass_files

  4. Jalankan perintah gem install compass, tunggu hingga proses install selesai. Jika proses install berjalan dengan baik, maka akan tampak seperti gambar berikut:
    sukses_install_compass

Catatan:
Dari mana saya mengetahui file dependency tersebut? saya dapatkan dengan menginstall satu persatu gem dimual dari compass, saya download gem compass kemudian saya copy ke folder C:\Ruby21, selanjutnya saya jalankan perintah gem install compass, kemudian muncul error seperti ini:

install_compass_error1

dari pesan tersebut dapat diketahui bahwa diperlukan file rb-inotify, untuk itu saya download file tersebut dan saya copy kan ke C:\Ruby, kemudian saya jalankan lagi gem install compass, ternyata muncul pesan error lagi:

install_compass_error2

dari pesan tersebut dapat diketahui bahwa diperlukan file rb-fsevent, untuk itu saya download file tersebut dan saya copy kan ke C:\Ruby, kemudian saya jalankan lagi gem install compass, begitu seterusnya hingga compass berhasil diinstall.

Oleh karena itu jika dikemudian hari compass memerlukan file dependency lain, maka tinggal kita download file yang diperlukan.

Untuk memastikan sass dan compass dapat berjalan dengan baik, jalankan perintah <code>sass -v</code> dan <code>compass -v</code>, seperti tampak pada gambar berikut:

sass_compass_running

Demikian penjelasan singkat mengenai cara install SASS dan Compass secara manual, semoga bermanfaat

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

2 Feedback dari pembaca

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL