Coding Sass Menggunakan Sublime Text Editor

Saat mulai belajar Sass kemarin sempat bingung juga mau pake text editor yang mana, meskipun ada beberapa text editor yang terinstall, tapi selama ini saya seringnya pake Aptana dan Notepad++. Setelah liat liat dari yang sudah mainan sass dan dari video tutorial kok sebagian besar pada pakai sublime text editor, diputuskan untuk ikut ikutan pake sublime juga. Akhirnya kepake juga sublime setelah lama terinstall namun jarang tersentuh, senasib dengan Brackets yang sampai saat ini belum pernah saya pake (Padahal katanya klo web designer atau front-end web developer lebih disarankan pake brackets).

Setelah coba bikin file *.sass dan *.scss di sublime, kok warna nya masih monochrome semua ya, ga enak banget dilihatnya, apalagi auto completion syntax nya pun tak ada, macam mana pula nih text editor. Sempet balik lagi ke Aptana dan Notepad++ ternyata sama saja ga support ama sass ini. Oh, berarti untuk menciptakan coding environment layaknya programming language lainnya yang berwarna warni mungkin butuh plugin tambahan. Sempat cari untuk notepad++ tapi warna nya ga banget, ga sedap dipandang mata, ya udah deh fokus buat nglengkapin sublime text supaya support Sass/Scss.

Sublime Package Control

Karena baru pertama kali install plugin/extension di sublime, jadi ada beberapa hal yang perlu dipersiapkan agar lebih enak dan mudah untuk me-manage plugin/extentson yang akan kita pakai, yaitu menggunakan package contorl. Untuk install package control ini silakan ikuti instruksi dari sini

Jika sudah berhasil install package control nya, silakan di buka lewat Preferences -> Package Control nanti bakal muncul tampilan seperti berikut

Sass Highlighting

Untuk membuat syntax berwarna yang perlu di install adalah sass-textmate-bundle plugin , kita ga perlu download source nya, jika terkoneksi internet tinggal install lewat package control saja, buka Package Control ketikkan Install Package, kemudian pilih/enter, tunggu sebentar untuk loading dari repositori… (klo yang ini tergantung koneksi, yang sabar aja…hehehehehe). Setelah muncul form search, ketikkan saja Sass nanti akan muncul beberapa plugin yang direkomendasikan, pilih yang ada kata kata sass-textmate-bundle nya

Coba restart dan buka file yang berekstensi *.scss dan wooiiilllaaa… syntax nya sudah berwarna warni. Namun jangan senang dulu, jika kita buka file yang berekstensi *.sass maka warna masih suram, ada cara tersendiri lagi (Makanya saya lebih seneng *.scss selain karena syntaxnya yang lebih mirip css)

1. Buka sass file.
2. Klik View | Syntax | Open all with current extension as … | Sass.

Sass Auto Completion 

Sedangkan untuk memunculkan auto completion nya, caranya lewat package control juga, cari dengan kata kunci : SublimeCodeIntel

Comments

  1. Reply

  2. By rio

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>