Sass কি?
Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS লেখাকে আরও শক্তিশালী, সুসংগঠিত এবং পুনঃব্যবহারযোগ্য করে তোলে। এটি variables, nesting, mixins, functions, এবং partials এর মতো বৈশিষ্ট্য সরবরাহ করে যা সিএসএস কোডিংয়ের প্রক্রিয়াকে দ্রুত, পরিষ্কার এবং সুবিধাজনক করে তোলে।
Sass ইনস্টলেশন
Sass ইনস্টল করার জন্য আপনার প্রথমে সিস্টেমে Node.js এবং NPM (Node Package Manager) ইনস্টল করা থাকতে হবে। যদি আপনি Yarn ব্যবহার করতে চান, তাহলে সেটাও বিকল্প হিসেবে ব্যবহার করা যেতে পারে।
এখানে আমরা Sass ইনস্টল এবং সেটআপ করার প্রক্রিয়া দেখাবো যা আপনাকে local development environment এ Sass ব্যবহারের জন্য প্রস্তুত করবে।
১. Node.js এবং NPM ইনস্টলেশন (প্রথম পদক্ষেপ)
যদি আপনার সিস্টেমে Node.js এবং NPM ইনস্টল না থাকে, তাহলে প্রথমে এগুলি ইনস্টল করতে হবে।
Node.js ইনস্টল করা:
- Node.js অফিসিয়াল সাইটে যান এবং LTS ভার্সন ডাউনলোড করুন।
- ডাউনলোড করার পর সেটআপ প্রক্রিয়া অনুসরণ করুন এবং ইনস্টল করুন।
NPM ইনস্টলেশন:
NPM সাধারণত Node.js ইনস্টল করার সময়ই ইনস্টল হয়ে যায়। আপনি কমান্ড প্রম্পট বা টার্মিনালে নিচের কমান্ডটি দিয়ে নিশ্চিত হতে পারেন:
npm -v
যদি NPM ইনস্টল না থাকে, তাহলে Node.js পুনরায় ইনস্টল করতে হবে।
২. Sass ইনস্টল করা
NPM দিয়ে Sass ইনস্টল করা:
NPM এর মাধ্যমে Sass ইনস্টল করতে, টার্মিনালে নিচের কমান্ডটি লিখুন:
npm install -g sass
এটি সারা পৃথিবীজুড়ে (globally) Sass ইনস্টল করবে, অর্থাৎ আপনি যেকোনো ডিরেক্টরি থেকে Sass ব্যবহার করতে পারবেন।
Yarn দিয়ে Sass ইনস্টল করা (অপশনাল):
যদি আপনি Yarn ব্যবহার করতে চান, তাহলে নিচের কমান্ডটি চালান:
yarn global add sass
এই কমান্ডটি Sass লাইব্রেরি ইনস্টল করবে, এবং আপনি Yarn ব্যবহার করে Sass কমান্ড চালাতে পারবেন।
৩. Sass ইনস্টলেশন যাচাই করা
Sass সঠিকভাবে ইনস্টল হয়েছে কিনা তা যাচাই করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
sass --version
এটি Sass এর বর্তমান ভার্সন প্রদর্শন করবে, যা নিশ্চিত করবে যে Sass সঠিকভাবে ইনস্টল হয়েছে।
৪. Sass ফাইল কম্পাইল করা
এখন আপনি Sass ফাইল তৈরি করতে পারবেন এবং সেগুলি কম্পাইল করে CSS ফাইলে রূপান্তর করতে পারবেন। Sass ফাইলের এক্সটেনশন .scss (Sassy CSS) বা .sass হতে পারে।
Sass ফাইল তৈরি করা:
যেমন, একটি style.scss ফাইল তৈরি করুন এবং নিচের কোডটি যোগ করুন:
$primary-color: #3498db;
body {
background-color: $primary-color;
font-family: Arial, sans-serif;
}
Sass কম্পাইল করা:
টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:
sass style.scss style.css
এই কমান্ডটি style.scss ফাইলটি কম্পাইল করে একটি style.css ফাইলে রূপান্তর করবে।
অটোমেটিক কম্পাইলিং:
যদি আপনি একটি প্রজেক্টে একাধিক Sass ফাইল ব্যবহার করেন এবং প্রতিবার পরিবর্তন করলে CSS ফাইলে অটোমেটিক আপডেট চান, তবে আপনি নিচের কমান্ডটি ব্যবহার করতে পারেন:
sass --watch style.scss:style.css
এটি watch mode এ চালাবে, অর্থাৎ যখনই style.scss ফাইলে পরিবর্তন হবে, তা স্বয়ংক্রিয়ভাবে style.css এ রিফ্লেক্ট হবে।
৫. প্রোজেক্টে Sass ব্যবহারের উদাহরণ
ধরা যাক, আপনি একটি প্রোজেক্ট তৈরি করছেন যেখানে আপনি Sass ব্যবহার করবেন। প্রথমে, একটি নতুন প্রোজেক্ট ডিরেক্টরি তৈরি করুন:
mkdir my-sass-project
cd my-sass-project
এখন, একটি নতুন style.scss ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি লিখুন:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
তারপর, Sass কম্পাইল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
sass style.scss style.css
এটি আপনার Sass ফাইলটি CSS ফাইলে রূপান্তরিত করবে। আপনি সেই CSS ফাইলটি আপনার HTML ফাইলে ব্যবহার করতে পারবেন।
সারাংশ
Sass ইনস্টল করা এবং সেটআপ করা খুবই সহজ, এবং এটি আপনার local development পরিবেশে সহজেই কাজ করবে। Node.js, NPM, অথবা Yarn ব্যবহার করে আপনি Sass ইনস্টল করতে পারেন এবং সাস ফাইলগুলো CSS ফাইলে কম্পাইল করতে পারবেন। এটি আপনার স্টাইলশিট পরিচালনা এবং কোড পুনঃব্যবহারযোগ্যতা সহজ করবে, যা ওয়েব ডেভেলপমেন্টের গতি বাড়ায় এবং কোডকে আরও সুসংগঠিত রাখে।
Read more
