menggunakan sass, stylus atau less bersamaan dengan chrome dev tools

  • calendar_today
  • styletutorial
  • shareshare
  • question_answercomment
Thumbnail - menggunakan sass, stylus atau less bersamaan dengan chrome dev tools

Menggunakan sass, stylus atau less bersamaan dengan chrome dev tools bukanlah hal yang terlalu sulit. Hal tersebut karena kita hanya melakukan beberapa setup baik itu di sass dan di chrome dev tools. Pada SASS kita hanya perlu melakukan watch pada file yang akan kita gunakan. Untuk Chrome dev tools kita mesti memasukan workspace dimana letak project kita tadi.

Kelebihan pengggunaan sass, stylus atau less dengan chrome dev tools adalah kita tidak perlu berpidah antara satu window ke window yang lainnya Sebagai contohna adalah ketika kita membuka sublime text kita mesti membuka chrome untuk melihat perubahan pada tampilan web kita. Selain itu kita mesti merefresh halaman website kita tadi agar terlihat perubahan yang terjadi. Salah satu kelebihan menggunakan cara ini adalah kita bisa langsung edit tampilan web kita langsung di chrome.

Prosess Installasi Project

Untuk memulai menggunakan sass di chrome dev tools bagi pemula silakan buat folder sesuai dengan gambar di bawah ini. Pastikan sass dan chrome browser telah terinstall di komputer kalian.

sass-chrome:.
├───css
├───sass
|   └───style.scss
└───index.html

langkah-langkah

Pada tahapan pertama ini kita akan menjalankan sass watcher yang berfungsi untuk mengcompile file atau folder sass. Watcher ini akan otomatis mengcompile sass baik itu file atau folder ketika mengalami perubahan. masukan perintah di bawah ini kedalam terminal kalian.

sass --watch sass:css

pada perintah di atas kita menyuruh watcher untuk mengcompile file dari directory sass ke css. Jika berhasil tercompile maka akan ada dua file di dalam folder css yaitu style.css dan style.css.map.

Buka chrome browser pada komputer kalian, untuk tutorial kali ini saya menggunakan chrome versi 63.0.3239.132 (Pembuatan Resmi) (64 bit). Jika versi chrome kalian ada di bawah itu silakan kalian update. Pada keyboard kalian silakan ketik F12 untuk membuka Chrome Dev Tools.

Image - menggunakan sass, stylus atau less bersamaan dengan chrome dev tools
diambil dari minergate.com
  1. Pada panel buka tab sources kalian akan melihat sebuah subpanel network dan filesystem. Didalam tab network kalian akan melihat sebuah folder berwarna orange yang berisi file sass
  2. Swap ke tab Filesystem kemudian kalian pilih Add folder to workspace. Masukan folder dimana project kalian tadi berada. jika berhasil maka project directory akan terlihat. .
Image - menggunakan sass, stylus atau less bersamaan dengan chrome dev tools
diambil dari minergate.com

Coba kalian mengedit file yang berada di dalam folder sass, maka otomatis tampilan didalam website anda tadi akan terupdate tanpa perlu mereferesh halaman tadi.

$color: #feb125;
h1{
  color: $color;
  font-size: 18px;
}

Demikian artikel mengenai cara menggunakan sass dengan chrome dev tools. Semoga kalian berhasi mencobanya dan jika mengalami kesulitan jangan ragu untuk bertanya di kolom komentar.