এই নির্দেশিকাটি একটি দ্রুত Node.js SASS/SCSS প্রজেক্ট সেট আপ করার সম্পূর্ণ পদ্ধতি ব্যাখ্যা করবে।
কিভাবে একটি দ্রুত Node.js Sass/SCSS প্রকল্প সেট আপ করবেন?
SASS নির্বাচিত উপাদানের উপর স্টাইল করার জন্য বিশুদ্ধ CSS বৈশিষ্ট্য ব্যবহার করে। এটি গণিত এবং পরিবর্তনশীল বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করে মূল CSS কে শক্তিশালী করে। এটি একটি শ্রেণিবিন্যাসে DOM-এ স্টাইলিং প্রয়োগ করে। Node.js-এর সাথে SASS সংহত করার মাধ্যমে, বিকাশকারী প্রকল্পটিকে আরও আকর্ষণীয় এবং পিক্সেল-নিখুঁত করতে খুব সহজেই স্টাইল করতে পারে৷
আসুন SASS/SCSS বরাবর একটি Node.js প্রজেক্ট সেট আপ করার জন্য নিচের ধাপগুলি অনুসরণ করি।
ধাপ 1: 'SASS' ইনস্টল করা হচ্ছে
প্রথমে ইনস্টল করুন ' SASS নোড প্যাকেজ ম্যানেজার ব্যবহার করে বিশ্বব্যাপী Node.js প্রকল্পে npm 'এই কমান্ডের মাধ্যমে:
npm install -g sass
আউটপুট দেখায় যে ' সাস প্যাকেজ ইনস্টল করা হয়েছে:
ধাপ 2: ডিরেক্টরি তৈরি করা
এর পরে, নিম্নলিখিত 'mkdir' কমান্ড ব্যবহার করে CSS এবং SCSS উভয় ফাইলের জন্য পৃথক ডিরেক্টরি তৈরি করুন:
mkdir cssFiles
mkdir scss ফাইল
দেখা যায় যে উপরের ' mkdir 'কমান্ড তৈরি করেছে' css ফাইল ' এবং ' scss ফাইল ' ডিরেক্টরি:
ধাপ 3: SASS মডিউল লিঙ্ক করুন
এখন, ব্যবহার করুন ' সাস 'এর রেসিডিং ফাইলে কোন পরিবর্তনের জন্য মডিউল দেখতে scss ফাইল ' ডিরেক্টরি। পরিবর্তনের ক্ষেত্রে, এটি স্বয়ংক্রিয়ভাবে লিঙ্কের ভিতরে CSS ফাইল তৈরি করবে। css ফাইল ” ডিরেক্টরি এবং CSS ফাইলে একই scss ডেটা সন্নিবেশ করান।
দেখার এবং লিঙ্ক করার জন্য নির্দেশ কার্যকর করা হবে সাস 'মডিউলটি নিম্নরূপ:
সাস --ঘড়ি scss ফাইল : css ফাইলএখন, saas scssFiles ডিরেক্টরিতে সব ধরণের পরিবর্তনের জন্য দেখছে।
বিঃদ্রঃ: উপরের কমান্ডটি সিস্টেম কমান্ড প্রম্পটে কার্যকর করা উচিত কারণ এটি ভিজ্যুয়াল স্টুডিও কোডের মতো টুল টার্মিনালগুলিতে কাজ করবে না।
ধাপ 4: SCSS এবং সংশ্লিষ্ট CSS ফাইল তৈরি করা
এই ধাপে, 'নামক একটি খালি ফাইল scss স্টাইল ' সঙ্গে ' scss 'এক্সটেনশন' এর ভিতরে তৈরি হয় scss ফাইল ' ডিরেক্টরি:
এর পরে, 'নাম সহ দুটি ফাইল scssStyle.css ' এবং ' scssStyle.css.map ' দ্বারা স্বয়ংক্রিয়ভাবে তৈরি হয় ' সাস ' এর ভিতরে মডিউল ' css ফাইল ' ডিরেক্টরি, নীচে দেখানো হিসাবে:
ধাপ 5: কোড সন্নিবেশ করান
অবশেষে, 'এর ভিতরে কিছু SCSS কোড লিখুন scssStyle.scss ' নিচে দেখানো হয়েছে:
এখন, সিএসএস ফরম্যাটে একই কোড স্বয়ংক্রিয়ভাবে 'এর ভিতরে ঢোকানো হয় scssStyle.css ' ফাইল:
আসুন gif এর সাহায্যে ধাপ 4 এবং 5 দৃশ্যতভাবে চিত্রিত করি:
এই নির্দেশিকাটি Node.js SASS\SCSS প্রকল্প তৈরি করার পদক্ষেপগুলি ব্যাখ্যা করেছে।
উপসংহার
একটি দ্রুত Node.js SASS/SCSS প্রকল্প সেট আপ করতে, প্রথমে মডিউলটি ইনস্টল করুন “ সাস ' মডিউল, এবং তারপর 'এর জন্য দুটি ডিরেক্টরি তৈরি করুন SASS\SCSS ' ফাইল এবং আরেকটি ' এর জন্য সিএসএস ' নথি পত্র. এর পরে, তৈরি করুন ' সাস 'এর মাধ্যমে নতুন তৈরি ডিরেক্টরিতে যেকোন পরিবর্তন দেখতে মডিউল sass – watch sass:css 'আদেশ। এই কর্মের ফলে 'SASS\SCSS' ফাইল এবং দুটি 'CSS' ফাইল 'CSS' ফোল্ডারে স্বয়ংক্রিয়ভাবে তৈরি হয়। ব্যবহারকারী যদি 'SASS\SCSS' ফাইলগুলি সংশোধন করে, তাহলে নতুন পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে CSS ফাইলগুলিতে ঢোকানো হবে৷ এই নির্দেশিকাটি Node.js SASS\SCSS প্রকল্প সেট আপ করার সম্পূর্ণ পদ্ধতি ব্যাখ্যা করেছে।