Bagaimana untuk Menyediakan Projek Sass/SCSS Node.js Pantas?

' SASS ” ialah singkatan kepada “ Lembaran Gaya Hebat Secara Sintaksis ” yang terkenal sebagai prapemproses CSS. SASS mudah digunakan dan ringan berbanding CSS. Ia dengan mudah menggayakan keseluruhan tapak web dengan cepat dan juga menyahpepijat ralat penggayaan. Ia berfungsi pada ' SCSS(Lembaran Gaya Lata Sassy) ” sebagai sebahagian daripada SASS. Ia memberikan lebih banyak kebebasan dan fleksibiliti kepada pembangun dan seseorang boleh mengimport 'SCSS' ke dalam projek 'SASS'.

Panduan ini akan menggambarkan prosedur lengkap untuk menyediakan projek SASS/SCSS Node.js pantas.

Bagaimana untuk Menyediakan Projek Sass/SCSS Node.js Pantas?

SASS menggunakan sifat CSS tulen untuk melakukan penggayaan pada elemen yang dipilih. Ia memperkasakan CSS asal dengan memasukkan ciri matematik dan pembolehubah. Ia menggunakan penggayaan pada DOM dalam hierarki. Dengan menyepadukan SASS dengan Node.js, pembangun boleh menggayakan projek dengan sangat mudah untuk menjadikannya lebih menarik perhatian dan piksel sempurna.

Mari ikuti langkah di bawah untuk menyediakan projek Node.js di sepanjang SASS/SCSS.

Langkah 1: Memasang 'SASS'

Mula-mula, pasang ' SASS ' secara global dalam projek Node.js menggunakan pengurus pakej nod ' npm ” melalui arahan ini:

npm install -g sass

Output menunjukkan bahawa ' saas ” pakej telah dipasang:

Langkah 2: Membuat Direktori

Seterusnya, buat direktori berasingan untuk kedua-dua fail CSS dan SCSS menggunakan arahan 'mkdir' berikut:

mkdir cssFiles

mkdir scssFiles

Dapat dilihat bahawa di atas ' mkdir perintah ' telah mencipta ' cssFiles ” dan “ scssFiles ” direktori:

Langkah 3: Pautkan Modul SASS

Sekarang, gunakan ' sass ' modul untuk melihat sebarang pengubahsuaian dalam fail yang tinggal ' scssFiles ” direktori. Dalam kes pengubahsuaian, ia akan membuat fail CSS secara automatik di dalam pautan ' cssFiles ” dan masukkan data scss yang sama dalam fail CSS.

Perintah yang akan dilaksanakan untuk menonton dan memautkan “ sass ” modul adalah seperti berikut:

sass --menonton scssFiles : cssFiles

Kini, saas sedang memerhatikan semua jenis pengubahsuaian dalam direktori scssFiles.

Catatan: Perintah di atas harus dilaksanakan pada Prompt Perintah sistem kerana ia tidak akan berfungsi pada terminal alat seperti kod Visual Studio.

Langkah 4: Penciptaan SCSS dan Fail CSS Sepadan

Dalam langkah ini, fail kosong bernama ' scssStyle ” dengan “ scss ' sambungan dibuat di dalam ' scssFiles ” direktori:

Selepas itu, dua fail dengan nama ' scssStyle.css ” dan “ scssStyle.css.map ” dibuat secara automatik oleh “ sass ' modul di dalam ' cssFiles ”, seperti yang ditunjukkan di bawah:

Langkah 5: Memasukkan Kod

Akhir sekali, masukkan beberapa kod SCSS di dalam “ scssStyle.scss ' seperti yang ditunjukkan di bawah:

Kini, kod yang sama dalam format CSS secara automatik dimasukkan ke dalam ' scssStyle.css ” fail:

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

Panduan ini telah menerangkan langkah-langkah untuk mencipta projek Node.js SASS\SCSS.

Kesimpulan

Untuk menyediakan projek SASS/SCSS Node.js pantas, mula-mula pasang modul “ sass ” modul, dan kemudian buat dua direktori satu untuk “ SASS\SCSS ” fail dan satu lagi untuk “ CSS ” fail. Selepas itu, buat ' sass modul untuk menonton sebarang pengubahsuaian dalam direktori yang baru dibuat melalui ' sass –menonton sass:css ” perintah. Hasil daripada tindakan ini, fail 'SASS\SCSS' dan dua fail 'CSS' dijana secara automatik dalam folder 'CSS'. Jika pengguna mengubah suai fail 'SASS\SCSS', maka perubahan baharu secara automatik akan dimasukkan ke dalam fail CSS. Panduan ini telah menerangkan prosedur lengkap untuk menyediakan projek Node.js SASS\SCSS.

Bagaimana untuk Menyediakan Projek Sass/SCSS Node.js Pantas?