Bagaimana Cara Mengatur Proyek Sass/SCSS Node.js yang Cepat?

“ KELANCANGAN ” adalah singkatan dari “ Stylesheet yang Mengagumkan Secara Sintaktis ” yang dikenal sebagai praprosesor CSS. SASS mudah digunakan dan ringan dibandingkan CSS. Ini dengan mudah menata seluruh situs web dengan cepat dan juga men-debug kesalahan penataan. Ini bekerja pada “ SCSS (Lembar Gaya Bertingkat Sassy) ” sebagai bagian dari SASS. Ini memberikan lebih banyak kebebasan dan fleksibilitas kepada pengembang dan seseorang dapat mengimpor “SCSS” ke dalam proyek “SASS”.

Panduan ini akan mengilustrasikan prosedur lengkap untuk menyiapkan proyek SASS/SCSS Node.js yang cepat.

Bagaimana Cara Mengatur Proyek Sass/SCSS Node.js yang Cepat?

SASS menggunakan properti CSS murni untuk melakukan penataan gaya pada elemen yang dipilih. Ini memberdayakan CSS asli dengan memasukkan fitur matematika dan variabel. Ini menerapkan gaya pada DOM dalam hierarki. Dengan mengintegrasikan SASS dengan Node.js, pengembang dapat menata proyek dengan sangat mudah agar lebih menarik dan pikselnya sempurna.

Mari ikuti langkah-langkah di bawah ini untuk menyiapkan proyek Node.js di sepanjang SASS/SCSS.

Langkah 1: Menginstal “SASS”

Pertama, instal “ KELANCANGAN ” secara global dalam proyek Node.js menggunakan manajer paket node “ npm ” melalui perintah ini:

npm install -g sass

Outputnya menunjukkan bahwa “ saas ” paket telah diinstal:

Langkah 2: Membuat Direktori

Selanjutnya, buat direktori terpisah untuk file CSS dan SCSS menggunakan perintah “mkdir” berikut:

mkdir cssFiles

mkdir scssFiles

Terlihat bahwa di atas “ mkdir Perintah ” telah membuat “ cssFiles ' Dan ' scssFiles ” direktori:

Langkah 3: Tautkan Modul SASS

Sekarang, gunakan “ kelancangan ” modul untuk melihat perubahan apa pun pada file yang ada di “ scssFiles ' direktori. Jika terjadi modifikasi, secara otomatis akan membuat file CSS di dalam tautan “ cssFiles ” direktori dan masukkan data scss yang sama ke dalam file CSS.

Perintah yang akan dijalankan untuk menonton dan menghubungkan “ kelancangan ” modulnya adalah sebagai berikut:

kelancangan --jam tangan scssFiles : cssFiles

Sekarang, saas mengawasi segala macam modifikasi di direktori scssFiles.

Catatan: Perintah di atas harus dijalankan pada Command Prompt sistem karena tidak akan berfungsi pada terminal alat seperti kode Visual Studio.

Langkah 4: Pembuatan SCSS dan File CSS yang Sesuai

Pada langkah ini, file kosong bernama “ scssStyle ' dengan ' scss ” ekstensi dibuat di dalam “ scssFiles ' direktori:

Setelah itu, dua file dengan nama “ scssStyle.css ' Dan ' scssStyle.css.peta ” dibuat secara otomatis oleh “ kelancangan ” modul di dalam “ cssFiles ” direktori, seperti yang ditunjukkan di bawah ini:

Langkah 5: Memasukkan Kode

Terakhir, masukkan beberapa kode SCSS di dalam “ scssStyle.scss ” seperti yang ditunjukkan di bawah ini:

Sekarang, kode yang sama dalam format CSS secara otomatis dimasukkan ke dalam “ scssStyle.css ” berkas:

Mari kita ilustrasikan langkah 4 dan 5 secara visual dengan bantuan gif:

Panduan ini telah menjelaskan langkah-langkah membuat proyek Node.js SASS\SCSS.

Kesimpulan

Untuk menyiapkan proyek SASS/SCSS Node.js yang cepat, pertama-tama instal modul “ kelancangan ” modul, lalu buat dua direktori, satu untuk “ SASS\SCSS ” file dan satu lagi untuk “ CSS ” file. Setelah itu, buatlah “ kelancangan ” modul untuk melihat modifikasi apa pun pada direktori yang baru dibuat melalui “ sass –tonton sass:css ' memerintah. Sebagai hasil dari tindakan ini, file “SASS\SCSS” dan dua file “CSS” dibuat secara otomatis di folder “CSS”. Jika pengguna memodifikasi file “SASS\SCSS”, maka perubahan baru secara otomatis akan dimasukkan ke dalam file CSS. Panduan ini telah menjelaskan prosedur lengkap untuk menyiapkan proyek Node.js SASS\SCSS.

Bagaimana Cara Mengatur Proyek Sass/SCSS Node.js yang Cepat?