Sass এর ভূমিকা
Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS লেখার পদ্ধতিকে আরও কার্যকরী এবং সুবিধাজনক করে তোলে। এটি CSS এর উপর অতিরিক্ত ফিচার যেমন variables, mixins, nesting, এবং functions সরবরাহ করে, যা কোড লেখার সময় সহজতা এবং পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।
Sass এ বিভিন্ন color manipulation functions রয়েছে, যেগুলোর মাধ্যমে আপনি CSS রঙের সাথে কাজ করতে পারেন। এখানে আমরা কিছু জনপ্রিয় ফাংশন যেমন lighten(), darken(), এবং adjust-hue() এর ব্যবহার নিয়ে আলোচনা করব।
১. lighten() ফাংশন
lighten() ফাংশনটি একটি নির্দিষ্ট রঙের আলো (lightness) বাড়িয়ে দেয়। এটি মূলত একটি রঙের উজ্জ্বলতা (brightness) বৃদ্ধি করতে ব্যবহৃত হয়। আপনি একটি রঙের সাথে শতাংশ প্রদান করেন, যার মাধ্যমে আপনি রঙের উজ্জ্বলতা বাড়াতে পারেন।
সিনট্যাক্স:
lighten(color, amount)
color: যে রঙের উজ্জ্বলতা বাড়াতে চান।amount: উজ্জ্বলতা বাড়ানোর পরিমাণ ( শতাংশে দেওয়া হয়, যেমন10%,20%ইত্যাদি)।
উদাহরণ:
$primary-color: #3498db;
.button {
background-color: lighten($primary-color, 20%);
}
এখানে, $primary-color এর উজ্জ্বলতা ২০% বাড়িয়ে button এর ব্যাকগ্রাউন্ড রঙ তৈরি করা হচ্ছে।
২. darken() ফাংশন
darken() ফাংশনটি একটি নির্দিষ্ট রঙের গা darkness (darkness) বাড়িয়ে দেয়। এটি রঙের গা darkening করতে ব্যবহৃত হয়। আপনি একটি রঙের সাথে শতাংশ প্রদান করেন, যার মাধ্যমে আপনি রঙের গা darkness বাড়াতে পারেন।
সিনট্যাক্স:
darken(color, amount)
color: যে রঙের গা darkness বাড়াতে চান।amount: গা darkness বাড়ানোর পরিমাণ ( শতাংশে দেওয়া হয়, যেমন10%,20%ইত্যাদি)।
উদাহরণ:
$primary-color: #3498db;
.button {
background-color: darken($primary-color, 10%);
}
এখানে, $primary-color এর গা darkness ১০% বাড়িয়ে button এর ব্যাকগ্রাউন্ড রঙ তৈরি করা হচ্ছে।
৩. adjust-hue() ফাংশন
adjust-hue() ফাংশনটি একটি রঙের hue (রঙের প্রধান উপাদান) পরিবর্তন করে। আপনি এই ফাংশনটির মাধ্যমে একটি রঙের মূল রঙটি পরিবর্তন করতে পারেন, যেমন নীল রঙ থেকে সবুজ বা লাল রঙে পরিবর্তন করা।
সিনট্যাক্স:
adjust-hue(color, amount)
color: যে রঙের hue পরিবর্তন করতে চান।amount: হিউ পরিবর্তনের পরিমাণ ( শতাংশে বা ডিগ্রিতে)।
উদাহরণ:
$primary-color: #3498db;
.button {
background-color: adjust-hue($primary-color, 90deg);
}
এখানে, $primary-color এর হিউ পরিবর্তন করে সেটি ৯০ ডিগ্রি ঘুরানো হয়েছে, ফলে রঙের রং পরিবর্তন হয়ে গেছে।
সারাংশ
Sass এর lighten(), darken(), এবং adjust-hue() ফাংশনগুলি CSS রঙের সাথে কাজ করার জন্য অত্যন্ত কার্যকরী টুল। lighten() রঙের উজ্জ্বলতা বাড়ায়, darken() রঙের গা darkness বাড়ায়, এবং adjust-hue() রঙের মূল রঙ (hue) পরিবর্তন করে। এই ফাংশনগুলির মাধ্যমে আপনি আপনার ডিজাইনে আরও দক্ষতা এবং কাস্টমাইজেশন যুক্ত করতে পারেন। Sass ব্যবহার করলে CSS কোড লেখা আরও শক্তিশালী এবং কমপ্যাক্ট হয়, যা ওয়েব ডেভেলপমেন্টে সময় এবং প্রচেষ্টা বাঁচাতে সহায়তা করে।
Read more
