Bekembang Bersama Sass dan DevTools Chrome

Pada artikel ini kita akan melihat bagaimana kita dapat mengintegrasikan Chrome DevTools dengan lebih baik ke dalam workflow development Sass.

Mengintip Tutorial!

Berikut ini sekilas tentang apa yang akan kita lakukan dalam tutorial ini melalui GIF animasi:

Di sebelah kiri adalah terminal dan editor teks Sublime, dan di sebelah kanan adalah Chrome. Perubahan pada file .scss sedang dipertahankan ke disk, yang tercermin dalam Sublime, perintah Sass watch menghasilkan versi baru dari file CSS ketika mendeteksi perubahan pada file Sass, yang pada gilirannya diambil oleh DevTools dan tercermin ke halaman.

Kebutuhan untuk Workflow yang Lebih Baik

Jadi apa yang kita coba selesaikan di sini? Mengapa kita ingin workflow yang lebih baik? Baiklah, mari kita tinjau contoh men-debug beberapa CSS yang dihasilkan oleh Sass, diberikan file .scss berikut, yang berisi:

1

$myColor: green;

2

3

body {

4

  .box {

5

		color: $myColor;

6

	}

7

}

Dan sekarang CSS, yang dihasilkan oleh file Sass di atas, akan terlihat seperti ini:

1

body .box {

2

  color: green; }

Sekarang kita hanya perlu sedikit HTML untuk menerapkan gaya kita ke:

1

<div class="box">Hello</div>

Ok, sejauh ini bagus. Sekarang kita ingin mulai merancang dan mengembangkan halaman menggunakan Chrome DevTools. Pertama, kita memeriksa div dengan kelas box dengan mengklik kanan dan memilih Inspect Element. Kemudian kita bisa perikasa panel gaya, yang menunjukkan nilai hijau untuk properti color, catatan pada nama file yang terkandung di dalamnya, bersama dengan nomor baris yang muncul pada pemilih. Sekarang di sinilah masalahnya - CSS yang diproses tidak mengikuti, baris demi baris, seperti apa file sumber .scss, yang dapat berdampak negatif pada workflow development kita.

Pada gambar di atas, panel kiri menunjukkan file sumber .scss dan sisi kanan menunjukkan versi yang diproses. (Catatan Saya menggunakan bundel SCSS untuk highlighting sintaks dalam Teks Sublime)

DevTools kemudian memberikan tautan ke file dan nomor baris pemilih, yang disorot dengan warna merah di atas, yang secara mengejutkan menghubungkan ke file yang diproses (gambar di bawah). Sekarang ini bertindak sebagai batasan untuk mengedit file di dalam DevTools karena kita tidak dapat mengambil manfaat dari penyimpanan file. Sebagai contoh, jika kita tetap melakukan perubahan pada file yang diproses, mereka hanya akan ditimpa ketika Sass selanjutnya berjalan.

Faktanya, kita bahkan tidak memiliki indikasi yang jelas tentang apa nomor baris yang sesuai - tentu saja, secara praktis, contoh kita di atas sangat sederhana dan kita dapat dengan cepat memahami garis peta apa, dengan melihat kode. Namun dalam file .scss yang lebih besar, berbagai hal bisa menjadi lebih rumit.

Seperti yang Anda lihat di atas, DevTools tidak memahami file .scss, namun kita dapat mengatasi ini dengan memanfaatkan workflow DevTools dan Sass, yang akan kita lihat dalam tutorial ini. Singkatnya, kurangnya dukungan Sass di DevTools dapat berarti:

• Kita tidak segera mengetahui nomor baris tempat pemilih dan/atau properti CSS ada, di dalam file sumber kita.
• Mempetahankan perubahan CSS kita ke sistem file cukup banyak dari pertanyaan.
• Bahkan sekadar melihat file .scss di panel sumber sulit karena DevTools tidak mengenali ekstensi sebagai ekstensi yang harus dilihat.

Mempersiapkan Dukungan Sass

Chrome

Sekarang mari kita bernavigasi about:flags di omnibox, lalu temukan Enable Developer Tools experiments, aktifkan, dan mulai ulang Chrome.

Gambar di bawah ini menunjukkan panel experiments, Anda dapat mencapai ini dengan mengklik roda gigi di sudut kanan bawah DevTools dan mengklik 'Experiments', lalu centang kotak untuk Support for Sass.

Setelah menutup dan membuka DevTools, Anda sekarang dapat pergi ke item menu General di sidebar kiri jendela settings dan menavigasi ke bagian Sources, dari sana, centang 'Enable source maps' dan 'Auto-reload CSS upon Sass save'. Timeout dapat dibiarkan pada nilai default.

Sass

Tutorial ini menggunakan versi terbaru dari Sass (3.3.0 pada saat penulisan ini) karena ada beberapa dukungan awal untuk peta sumber. Inilah cara Anda dapat menginstal Sass menggunakan Rubygems:

1

gem install sass --pre

Kita sekarang perlu memberi tahu Sass untuk mengkompilasi file .scss, menggunakan perintah berikut:

1

sass --watch --scss --sourcemap styles.scss:styles.css

Dari atas, styles.scss adalah file sumber Anda dan styles.css adalah file yang diproses, yang akan digunakan halaman HTML Anda. Berikut cara Anda menautkan file .css yang diproses:

1

<link rel="stylesheet" type="text/css" href="styles.css">

Jika Anda melihat sesuatu yang mirip dengan gambar di bawah di terminal Anda:

...dan Anda melihat file .map yang dihasilkan, lalu, selamat: Sass debugging berfungsi! Inilah yang dilakukan opsi-opsi perintah lain dari perintah kompilasi sebelumnya:

• --watch: Akan mengawasi perubahan pada file sumber .scss dan mengkompilasinya segera setelah ia mendeteksi perubahan.
• --scss: Akan menampilkan gaya apa dari Sass yang digunakan.
• --sourcemap: Akan menghasilkan file peta sumber yang sesuai.

Sekarang, memiliki pemahaman tentang peta sumber tidak penting untuk diikuti, namun tentu saja ini sesuatu yang layak dibaca karena dimaksudkan untuk membantu proses pengembangan. Lihat di bawah untuk beberapa sumber pada peta sumber:

• Pengantar Peta Sumber JavaScript di HTML5Rocks
• Sumber peta: bahasa, alat, dan info lainnya di Github
• Sumber Maps 101 pada Nettuts

Dari Elemen ke Sumber

Dengan asumsi semua berjalan dengan baik, membuka halaman Anda di mana dukungan Sass diaktifkan di DevTools harus memungkinkan untuk Sass debugging. Hal pertama yang perlu diperhatikan adalah bahwa nama file akan menampilkan file sumber .scss yang sesuai, yang berguna, selain itu, nomor baris dengan benar mencerminkan nomor baris dalam file sumber.

Mengklik pada nama file akan membawa Anda langsung ke panel sumber dengan garis yang sesuai dengan pemilih yang disorot.

Oke, jadi menemukan pemilih CSS yang sesuai dari panel Elements itu keren, tapi bagaimana dengan properti CSS?

Pada tangkapan layar di bawah ini, panel Sources telah menyoroti properti CSS yang saya minati, untuk sampai ke sana saya telah Command-Clicked pada properti dari dalam panel Elements. Fakta bahwa itu telah membawa saya ke garis di mana nilai itu didefinisikan (bukan line: property: $value;) sangat kuat!

Catatan: Menavigasi ke properti CSS di panel sumber dari perintah mengklik properti di panel Elements tidak khusus untuk Sass, itu dapat dicapai dengan CSS biasa juga.

Pengeditan Sass Dengan Perubahan Persisten

Mengedit file Sass tidak jauh berbeda dari mengedit file CSS biasa, satu hal yang perlu kita lakukan adalah memastikan DevTools tahu di mana file .scss berada di sistem file. Dari dalam panel Sources , bilah sisi sebelah kiri harus memiliki panel Sources  yang menampilkan file .scss, klik kanan dan pilih Save as, kemudian timpa file sumber .scss yang ada.

Karena kita memeriksa 'Auto-reload CSS upon Sass save' dan karena Sass berjalan di terminal dengan flag watch, perubahan dilakukan dengan sangat cepat dan DevTools dapat menunjukkan kepada kita perubahan tersebut.

Bahkan mixins berfungsi seperti yang diharapkan, menempelkan yang berikut ini, dalam file .scss yang hampir kosong di dalam panel sources menghasilkan CSS yang benar yang dihasilkan, yang dapat diisi ulang oleh DevTools dalam hitungan detik.

1

@mixin button {

2

    border: 2px solid green;

3

    display: inline-block;

4

    padding: 10px;

5

    border-radius: 4px;    

6

}

7

8

.box {

9

    @include button;   

10

}

Seperti yang dapat Anda lihat pada gambar di atas, sisi kiri memperlihatkan file sumber .scss, yang akan diubah, sisi kanan menunjukkan file .css yang dihasilkan dari mana DevTools menerima perubahan (segera terima kasih ke flag watch di terminal)

Sass Debugging di Fluent Conf

Paul Irish memberikan pernyataan hebat di Fluent yang memiliki banyak informasi menarik tentang Chrome DevTools, tetapi juga penggunaan Sass. Lewati ke 5:30 untuk informasi Sass.

Fluent 2013: Paul Irish, "JavaScript Authoring Tooling"

Ringkasan

Mari kita bahas beberapa poin utama yang dibahas dalam tutorial ini:

• Kemampuan Sass di Chrome DevTools adalah cara yang bagus untuk melihat dan memodifikasi sumber Sass, meskipun jangan lupa untuk mengaktifkannya baik about:flags maupun di panel settings.
• Saat menggunakan Sass dan Chrome DevTools dalam suatu proyek, Anda cenderung memiliki workflow yang lebih efisien dengan melihat/mengedit file sumber, daripada file yang dihasilkan.
• Properti CSS di panel element dapat diklik-perintah, nama file yang ditampilkan di sebelah kanan pemilih juga dapat diklik. Keduanya akan membawa Anda ke bagian yang relevan di panel sumber.
• Memanfaatkan kemampuan mengedit panel Sources dengan melakukan 'Save as' pada file .scss, penyimpanan di masa depan (Command + S) harus menimpa file.
• Chrome Canary dan versi terbaru dari Sass 3.3.0 (karena Sumber peta) digunakan dalam tutorial ini, pastikan untuk mencobanya!

Link menarik

Seperti yang Anda lihat, workflow development dengan Sass tidak sempurna, tapi itu pasti jauh lebih baik daripada dulu. Seiring berjalannya waktu, DevTools akan memberikan workflow yang lebih ramping untuk mengedit file CSS dan bug akan diperbaiki! Masalah apa pun yang Anda temukan dapat dimunculkan sebagai bug di crbug.com.

• Debug KURANG Dengan Tools Developer Chrome oleh Rob Dodson
• Changeset: Inspektur Web: Pemetaan sumber SASS
• Breakpoint Ep. 2 - Sekitar 3 menit, ia memiliki demo Sass
• Menggunakan peta sumber Sass di Inspektur WebKit - Di bricss.net
• Debugging Sass dengan Source Maps - By @Snugug

Terima kasih sudah membaca artikel ini!

Seperti apa yang sudah Anda pelajari? Pelajari Lebih Lanjut Tentang Chrome DevTools!