Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sass
Webdesign

Sass ke CSS: Bagaimana Mempertahankan Area Putih Saat Kompilasi

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Pernahkah kamu menginginkan untuk mempertahankan struktur visual file Sass, ketika mengkompilasinya ke CSS, tanpa kehilangan area putih? Di dalam tip singkat ini saya akan menunjukkan caranya!

Tonton Tip Singkat

Tip singkat ini diperuntukkan bagi mereka yang perlu mengkompilasi Sass ke sebuah bentuk "yang meluas". Jika kamu mengkompilasi ke bentuk "terkompresi" atau "dikecilkan" maka keseluruhan pertanyaan tentang area putih menjadi tidak relevan.

Permasalahan

Bayangkan kamu memiliki beberapa parsial Sass yang diformat seperti ini, termasuk jeda baris kosong di bagian bawah:

Menyusunnya di bawah keadaan normal akan memberimu sesuatu seperti:

Namun katakanlah kamu benar-benar menginginkan berikut ini:

Solusi

Kita akan menyelesaikannya menggunakan plugin Grunt bernama grunt-replace. Untuk detail caranya bagaimana mengaktifkan dan menjalankan Grunt, lihat sumber-sumber berikut:

Kita memuat grunt-replace, bersamaan dengan beberapa dependencies lainnya, di dalam file package.json seperti yang ditunjukkan di dalam snippet di bawah:

Kemudian, di dalam file grunt.js kita harus menerapkan tugas:

Match

Kita menerapkan tugas mengganti setelah kita mengkompilasi file Sass (periksa file sumber untuk lebih banyak detail).

Perhatikan pilihan patterns, yang menunjukkan sebagai berikut:

Ini menginstruksikan Grunt untuk berjalan melalui file yang dikompilasi, menemukan contoh /**/ dan menggantinya dengan sebuah string kosong. Sekarang yang perlu kita lakukan adalah masuk melalui parsial Sass, menempatkan komentar /**/ ini dimana pun kita menginginkan area putih, dan biarkan Grunt yang melakukan sisanya:

Kesimpulan

Grunt-replace merupakan task yang benar-benar berguna untuk menemukan strings umum dan menggantinya dengan sesuatu yang lainnya, kapanpun kamu menjalankan Grunt. Di dalam kasus ini, itu sempurna untuk mencegah area putih dari dihapus pada kompilasi Saas. Untuk apa lagi kamu menggunakannya?

Sumber Berguna

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.