Sass (Syntactically Awesome Stylesheets) কী?
Sass হল একটি শক্তিশালী সিএসএস প্রিপ্রসেসর যা সিএসএস-এর উপর ভিত্তি করে আরও শক্তিশালী ফিচার এবং ফাংশনালিটি সরবরাহ করে। এটি variables, nested rules, mixins, inheritance এবং অন্যান্য অনেক সুবিধা প্রদান করে, যা সিএসএসকে আরও শক্তিশালী এবং রিডেবিলিটি বাড়ায়।
এখানে রঙের গণনা সম্পর্কিত কিছু ফাংশন নিয়ে আলোচনা করা হবে যেমন darken(), lighten(), এবং adjust-hue()। এই ফাংশনগুলি আপনাকে সিএসএস রঙ পরিবর্তন বা কাস্টমাইজ করার ক্ষেত্রে সহায়তা করবে।
১. darken() ফাংশন
darken() ফাংশনটি একটি রঙকে নির্দিষ্ট পরিমাণে গা dark ় করে দেয়। এটি একটি রঙ এবং একটি পার্সেন্টেজ নেয়। পার্সেন্টেজ মানটি নির্দেশ করে কতটা গা dark ় করা হবে।
সিনট্যাক্স:
darken($color, $amount)
$color: আপনার নির্ধারিত রঙ$amount: গা dark ় করার পরিমাণ (পার্সেন্টেজে)
উদাহরণ:
$primary-color: #3498db; // নীল রঙ
.button {
background-color: darken($primary-color, 20%);
}
এখানে, $primary-color (নীল) রঙের গা dark ় ২০% করে darken() ফাংশনটি ব্যবহার করা হয়েছে।
২. lighten() ফাংশন
lighten() ফাংশনটি একটি রঙকে নির্দিষ্ট পরিমাণে হালকা করে দেয়। এটি একটি রঙ এবং একটি পার্সেন্টেজ নেয়। পার্সেন্টেজ মানটি নির্দেশ করে কতটা হালকা করা হবে।
সিনট্যাক্স:
lighten($color, $amount)
$color: আপনার নির্ধারিত রঙ$amount: হালকা করার পরিমাণ (পার্সেন্টেজে)
উদাহরণ:
$primary-color: #3498db; // নীল রঙ
.button {
background-color: lighten($primary-color, 20%);
}
এখানে, $primary-color (নীল) রঙের হালকা ২০% করে lighten() ফাংশনটি ব্যবহার করা হয়েছে।
৩. adjust-hue() ফাংশন
adjust-hue() ফাংশনটি একটি রঙের হিউ (Hue) পরিবর্তন করতে ব্যবহৃত হয়। এটি একটি রঙ এবং একটি পার্সেন্টেজ নেয়। পার্সেন্টেজ মানটি নির্দেশ করে কতটুকু হিউ পরিবর্তন করা হবে।
সিনট্যাক্স:
adjust-hue($color, $degrees)
$color: আপনার নির্ধারিত রঙ$degrees: হিউ পরিবর্তনের পরিমাণ (ডিগ্রিতে)
উদাহরণ:
$primary-color: #3498db; // নীল রঙ
.button {
background-color: adjust-hue($primary-color, 45deg);
}
এখানে, $primary-color (নীল) রঙের হিউ ৪৫ ডিগ্রি পরিবর্তন করা হয়েছে। এতে রঙের টোন পরিবর্তিত হবে।
৪. এটি কিভাবে কাজে আসে?
এই ফাংশনগুলো সিএসএস রঙের টোন, শেড এবং হিউ কাস্টমাইজ করার জন্য খুবই কার্যকর। সাস এর মাধ্যমে আপনি ডাইনামিক রঙ তৈরি করতে পারবেন যা আপনার ডিজাইনকে আরও প্রাণবন্ত এবং রেসপন্সিভ করে তোলে। আপনি এর মাধ্যমে বিভিন্ন UI উপাদানের রঙ পরিবর্তন করতে পারেন যেমন বাটন, লিংক, ব্যাকগ্রাউন্ড ইত্যাদি।
উদাহরণ:
$base-color: #3498db;
.button {
background-color: $base-color;
&:hover {
background-color: darken($base-color, 10%);
}
}
.card {
border: 1px solid lighten($base-color, 20%);
}
.alert {
background-color: adjust-hue($base-color, 120deg);
}
এখানে, আমরা একটি button তৈরি করেছি যার hover অবস্থায় রঙ গা dark ় হয়। card এর জন্য হালকা রঙ এবং alert এর জন্য রঙের হিউ পরিবর্তন করা হয়েছে।
সারাংশ
Sass এর রঙের গণনা ফাংশনগুলি যেমন darken(), lighten(), এবং adjust-hue() আপনাকে সহজে এবং দক্ষতার সাথে রঙ কাস্টমাইজ করতে সাহায্য করে। আপনি এই ফাংশনগুলো ব্যবহার করে আপনার ওয়েব ডিজাইনকে আরও সুন্দর এবং ডাইনামিক করতে পারেন, যেমন বিভিন্ন UI উপাদানের জন্য রঙের টোন, শেড এবং হিউ পরিবর্তন করা। Sass এর মাধ্যমে CSS কোড লেখার কাজ আরও সহজ এবং দ্রুত হয়, যা ওয়েব ডেভেলপমেন্টের গতি বাড়ায়।
Read more
