Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Memantau dan Mengkompilasi Sass dalam Lima Langkah Cepat

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Anissa Anwar (you can also view the original English article)

Final product image
What You'll Be Creating

Sass mungkin yang paling populer dari CSS pra-prosesor; selama bertahun-tahun itu membantu kami menulis bersih, dapat digunakan kembali dan modular CSS. Dalam tutorial singkat ini, saya akan memotong langsung ke hal-hal yang penting dan menjelaskan cara untuk mengkompilasi Sass ke CSS menggunakan baris perintah.

1. Install Node.js

Untuk mengkompilasi Sass melalui baris perintah, pertama kita perlu menginstall Node.js. Mengunduh dari situs resmi nodejs.org, membuka paket dan mengikuti wizard.

2. Initialize NPM

NPM adalah Node Package Manager untuk JavaScript. NPM mudah untuk menginstall dan uninstall paket pihak ketiga. Untuk initialize proyek Sass dengan NPM, buka terminal dan CD (mengubah direktori) ke folder proyek Anda. 

Navigating to SASS-tutorial folder
Menavigasi ke folder proyek Sass

Setelah di folder yang benar, jalankan perintah npm init. Anda akan diminta untuk menjawab beberapa pertanyaan tentang proyek, setelah NPM akan generate file package.json di folder Anda.

packagejson

3. Install Node-Sass

Node-sass adalah paket NPM yang mengkompilasi Sass ke CSS (yang sangat cepat juga). Untuk menginstall node-sass jalankan perintah berikut di terminal Anda: npm install node-sass

4. Menulis Perintah Node-sass

Semuanya sudah siap untuk menulis script kecil untuk mengkompilasi Sass. Buka file package.json dalam code editor. Anda akan melihat sesuatu seperti ini:

Di bagian scripts menambahkan perintah scss, di bawah perintah test, seperti yang ditunjukkan di bawah ini:

Mari kita melalui baris ini kata demi kata.

  1. node-sass: Mengacu pada paket node-sass.
  2. -watch: Sebuah flag opsional yang berarti "memantau semua file .scss di scss/folder dan mengkompilasi ulang mereka setiap kali ada perubahan."
  3. scss: Nama folder di mana kita meletakkan semua file .scss 
  4. -o css: Output folder untuk menyusun CSS.

Ketika kita menjalankan script ini akan memantau setiap file .scss di scss/ folder, kemudian simpan css yang dikompilasi dalam css/ folder setiap kali kita mengubah file .scss.

5. Menjalankan Script

Untuk menjalankan script satu baris, kita perlu menjalankan perintah berikut di terminal: npm run scss

Dan voila! Kita memantau dan kompilasi SASS.

Panduan Singkat Sass

Menantikan untuk lebih panduan singkat Sass; seluruh koleksi sedang berada di jalan!

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.