BLOG.MAKMALF

Words are breathing

Wednesday, 11 June 2014

Instalasi Sass dan Setting Sublime Text 2 untuk Sass Coding Environment (Bag. I)

By the way, dulu saya tidak begitu tertarik menggunakan CSS Preprocessor macam Sass ini. Tapi seiring waktu, beberapa proyek website yang saya buat membutuhkan rekayasa CSS yang lumayan kompleks. Daripada kesel sendiri memikirkan efisiensi coding CSS yang maksimal, akhirnya saya memutuskan untuk mempelajari Sass.

Berikut langkah-langkah instalasi Sass di Windows.

Install Ruby

Sass hanya bisa berjalan jika Ruby telah terinstal di komputer kita. Cara instalasi yang paling mudah, silakan download Ruby-nya di sini.

Install Sass

Pastikan komputernya masih tersambung dengan internet, kemudian jalankan Command Prompt. Dan tulis perintah ini:

gem install sass

Perintah itu untuk mendownload package Sass. Jadi sabar aja ya, untuk kalian yang koneksi internetnya lemot. LOL.

Jika sudah ada notifikasi sukses, lanjut tahap berikutnya.

Install Compass

Sass itu udah keren, tapi akan tambah keren lagi jika disandingkan dengan Compass. Kelebihannya bisa digunakan untuk ngulik CSS Image Sprites. Masih di Command Prompt. Tulis perintah ini untuk download package-nya:

gem install compass

Recheck The Installation's Status

Pastikan lagi kalo Sass dan Compass-nya sudah berhasil diinstall dengan perintah ini:

sass -v

gem -v

Pastikan akan muncul seperti ini:


Build up The Environment

Ini langkah terakhir sebelum kita bisa memulai ngoding.

Ketikkan perintah ini di Command Prompt:

mkdir makmalf-compass     // membuat direktor bernama "makmalf-compass"
cd makmalf-compass     // memasukkan "sesuatu" ke dalam direktori tersebut
init compass     // "Sesuatu"  itu adalah "Compass".

Ribet ya bahasanya.

Jika proses inisialisasi sukses akan ada notifkasi. Congratulations! Your compass project has been created bla bla bla.

Langkah selanjutnya, masuk ke direktori yang kita buat tadi. Biasanya ada C:/Users/NamaUsers/makmalf-compass. Di dalam folder tersebut, buat satu file html baru, namai saja index.html. Jangan lupa sisipkan code berikut di bagian <head> nya.

<link rel="stylesheet" href="stylesheet/screen.css" />

Kalau semuanya sukses, environment path nya akan seperti berikut.

Hanya satu file yang saya tambahkan, yaitu index.html

Enjoy Coding

But wait, selama coding jangan close Command Prompt-nya. Dan ketik dulu perintah ini:

compass watch   // auto compile setiap perubahan yang kita lakukan di /sass/namafile.scss

Ingat. 

Yang di edit harus yang di folder sass aja ya, soalnya sistem ini bersifat diktator. Segala perubahan yang dilakukan di file *css dalam folder stylesheet akan otomatis berubah lagi menyesuaikan dengan kondisi terakhir yang kita kerjakan di file *scss dalam folder sass. Tidak berlaku sebaliknya.

*****

Cukup sampai di sini dulu. Nanti kita lanjut ke bagian kedua yang akan membahas tentang Setting Sublime Text 2 agar support untuk kegiatan coding-codingan Sass.

Referensi

Berguna untuk mempelajari dasar Sass:




2 comments:

  1. ini blog kamu Mal? eh apa kabar, msh inget gak nih?

    ReplyDelete
    Replies
    1. Iya ini domainnya kemarin2 dirubah. hehe

      Inget dong, pas awal saya ngeblog sering bgt berkunjung ke situ. hehe

      Delete