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.
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 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:
setelah itu ketikkan kembali perintah
gem install sass
tunggu beberapa saat hingga proses instalasi selesai, conoh tampilan pada command promt adalah sebagai berikut:
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:
- Download Ruby Development Kit di http://rubyinstaller.org/downloads/ dan ekstrak, misal ke C:\RubyDevKit
- Melalui comman promt pindah cursor ke direktory RubyDevKit dengan menjalankan perintah
cd C:\RubyDevKit
, selanjutnya jalankan perintahruby dk.rb init
kemudianruby dk.rb install
seperti gambar dibawah:
- Download compass dan file dependency nya, sampai dengan tulisan ini ditulis, file yang diperlukan adalah:
- compass
- compass-core
- compass-import-once
- sass (telah kita install sebelumnya)
- chunky_png
- ffi
- fssm
- multi_json
- rb-fsevent
- rb-inotify
Copy semua file ke direktory ruby, dalam contoh ini C:\Ruby21, seperti gambar berikut:
- Jalankan perintah
gem install compass
, tunggu hingga proses install selesai. Jika proses install berjalan dengan baik, maka akan tampak seperti gambar berikut:
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:
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:
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:
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
2 Feedback dari pembaca
Terima kasih mas, luar biasa sekali tutorial nya!
Sama-sama mas, semoga bermanfaat