Sass কি?
Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS কোডকে আরও শক্তিশালী, সুষম, এবং রিইউজেবল করে তোলে। Sass-এ আপনি ভেরিয়েবল, নেস্টিং, মিক্সিন, ইনহেরিটেন্স এবং অন্যান্য ফিচার ব্যবহার করতে পারেন যা স্টাইল শীট লিখতে সুবিধা প্রদান করে। এটি CSS এর উপর অতিরিক্ত ফিচার প্রদান করে, যার মাধ্যমে CSS কোড আরও দ্রুত এবং কার্যকরভাবে লেখা যায়।
Sass এর দুটি ফাইল এক্সটেনশন রয়েছে:
.scss(Sassy CSS): এটি CSS-এর মতো সিনট্যাক্সে লেখা হয়।.sass: এটি একটি প্রাচীন সিনট্যাক্স যা সেমি-কোলন এবং ব্রেস ব্যবহার না করে।
এখানে আমরা scss ফাইল কম্পাইল করার প্রক্রিয়া সম্পর্কে আলোচনা করব।
প্রথম Sass ফাইল কম্পাইল এবং আউটপুট তৈরি
১. Sass ইনস্টলেশন
প্রথমে আপনার সিস্টেমে Sass ইনস্টল করতে হবে। Sass এর জন্য NPM (Node Package Manager) ব্যবহার করা হয়।
Sass ইনস্টল করার জন্য কমান্ড:
npm install -g sass
এটি সাস ইনস্টল করবে এবং কমান্ড লাইন থেকে sass কমান্ডটি ব্যবহারের সুযোগ দেবে।
২. Sass ফাইল তৈরি করা
এখন, একটি নতুন .scss ফাইল তৈরি করুন যেখানে আপনি স্টাইল শীট লিখবেন। উদাহরণস্বরূপ, styles.scss নামে একটি ফাইল তৈরি করুন।
styles.scss ফাইলের মধ্যে কিছু Sass কোড লেখুন:
// Variable
$primary-color: #3498db;
body {
background-color: $primary-color;
font-family: Arial, sans-serif;
}
h1 {
color: darken($primary-color, 10%);
}
p {
color: lighten($primary-color, 30%);
}
এখানে, আমরা একটি ভেরিয়েবল $primary-color তৈরি করেছি এবং সেই ভেরিয়েবলটি বডি, হেডিং, এবং প্যারাগ্রাফের জন্য বিভিন্ন শেডে ব্যবহার করেছি।
৩. Sass ফাইল কম্পাইল করা
Sass ফাইল কম্পাইল করার জন্য, নিচের কমান্ডটি ব্যবহার করুন:
sass styles.scss styles.css
এখানে:
styles.scss: আপনার Sass ফাইল।styles.css: আউটপুট CSS ফাইল যা কম্পাইল হওয়ার পর তৈরি হবে।
এই কমান্ডটি styles.scss ফাইলটি কম্পাইল করে একটি নতুন styles.css ফাইল তৈরি করবে।
৪. CSS আউটপুট
যখন আপনি sass styles.scss styles.css কমান্ডটি রান করবেন, তখন এটি styles.css ফাইলে নিম্নলিখিত CSS আউটপুট তৈরি করবে:
body {
background-color: #3498db;
font-family: Arial, sans-serif;
}
h1 {
color: #2980b9;
}
p {
color: #66b3e3;
}
এখানে, Sass ভেরিয়েবল এবং ফাংশন ব্যবহার করে যে স্টাইল ছিল, তা এখন সাধারণ CSS কোডে পরিণত হয়েছে এবং এটি ব্রাউজারে কার্যকরীভাবে চলবে।
৫. Watch Mode ব্যবহার করা
আপনি যদি বারবার ফাইল কম্পাইল না করে প্রতিবার পরিবর্তন করতে চান, তাহলে watch mode ব্যবহার করতে পারেন। এটি আপনার Sass ফাইলের পরিবর্তন সনাক্ত করে স্বয়ংক্রিয়ভাবে CSS ফাইল আপডেট করবে।
sass --watch styles.scss:styles.css
এখন, আপনি যখন styles.scss ফাইলটি আপডেট করবেন, তখন এটি স্বয়ংক্রিয়ভাবে styles.css ফাইলকে আপডেট করবে।
সারাংশ
Sass হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা CSS কোডকে আরও সুসংগঠিত এবং রিইউজেবল করে তোলে। আপনার প্রথম Sass ফাইল কম্পাইল এবং আউটপুট তৈরি করতে, আপনাকে সিস্টেমে Sass ইনস্টল করতে হবে এবং এরপর .scss ফাইল তৈরি করে সেটি .css ফাইলে কম্পাইল করতে হবে। Watch mode ব্যবহার করলে আপনি আপনার Sass ফাইল পরিবর্তন করার সাথে সাথে CSS ফাইলটি স্বয়ংক্রিয়ভাবে আপডেট করতে পারবেন। Sass এর মাধ্যমে আপনি আরও সহজে এবং দ্রুত CSS কোড লিখতে পারবেন।
Read more
