Map ব্যবহার করে Key-Value পেয়ার পরিচালনা

Sass এবং Map কি?

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS-কে আরও কার্যকরী এবং পরিচালনাযোগ্য করার জন্য উন্নত বৈশিষ্ট্য প্রদান করে। Sass-এ আপনি ভেরিয়েবল, নেস্টিং, পার্টিয়ালস, মিক্সিন্স, ইম্পোর্ট এবং আরও অনেক কিছু ব্যবহার করতে পারেন।

Map হল একটি ডেটা স্ট্রাকচার যা key-value pair সঞ্চিত রাখে। এটা JavaScript-এ অবজেক্টের মতো কাজ করে, কিন্তু Sass-এর মধ্যে এটি আরও শক্তিশালী ফিচার হিসেবে কাজ করে, যেখানে আপনি কাস্টম key-value জোড়া পরিচালনা করতে পারেন।

Sass-এ Map ব্যবহার করে আপনি ডাইনামিক ভ্যালু সঞ্চয় এবং ম্যানিপুলেশন করতে পারবেন, যা কোড পুনঃব্যবহারযোগ্য এবং কমপ্যাক্ট করে তোলে।

Sass-এ Map ব্যবহার করা

Sass-এর মধ্যে Map তৈরি করতে এবং তার key-value pairs পরিচালনা করতে আপনি map-get(), map-merge(), map-remove(), map-keys(), map-values() ইত্যাদি ফাংশন ব্যবহার করতে পারেন।

১. Map তৈরি করা

Sass-এ একটি Map তৈরি করতে আপনি সাধারণভাবে {} চিহ্ন ব্যবহার করে key-value জোড়া লিখে থাকেন।

$colors: (
  "primary": #3498db,
  "secondary": #2ecc71,
  "tertiary": #e74c3c
);

এখানে $colors নামক একটি Map তৈরি করা হয়েছে, যেখানে ৩টি key-value পেয়ার আছে।

২. Map থেকে ভ্যালু পাওয়া

map-get() ফাংশন ব্যবহার করে আপনি একটি নির্দিষ্ট key-এর মান বের করতে পারেন।

$primary-color: map-get($colors, "primary");

এখানে, map-get() ফাংশনটি $colors Map থেকে "primary" key-এর মান বের করবে, এবং সেটি $primary-color এ সঞ্চিত হবে।

৩. Map-এ নতুন key-value পেয়ার যোগ করা

map-merge() ফাংশন ব্যবহার করে আপনি একটি Map এ নতুন key-value পেয়ার যুক্ত করতে পারেন।

$colors: map-merge($colors, ("quaternary": #f39c12));

এখানে, map-merge() ফাংশনটি $colors Map এর সাথে নতুন key-value পেয়ার যোগ করছে: "quaternary": #f39c12।

৪. Map থেকে key-value পেয়ার মুছে ফেলা

map-remove() ফাংশন ব্যবহার করে আপনি একটি নির্দিষ্ট key-value পেয়ার Map থেকে মুছে ফেলতে পারেন।

$colors: map-remove($colors, "tertiary");

এখানে, map-remove() ফাংশনটি $colors থেকে "tertiary" key-value পেয়ারটি মুছে ফেলবে।

৫. Map থেকে সব keys পাওয়া

map-keys() ফাংশন ব্যবহার করে আপনি একটি Map এর সব keys বের করতে পারেন।

$color-keys: map-keys($colors);

এখানে, map-keys() ফাংশনটি $colors Map এর সব keys রিটার্ন করবে, যেমন "primary", "secondary", "quaternary" ইত্যাদি।

৬. Map থেকে সব values পাওয়া

map-values() ফাংশন ব্যবহার করে আপনি একটি Map এর সব values বের করতে পারেন।

$color-values: map-values($colors);

এখানে, map-values() ফাংশনটি $colors Map এর সব values রিটার্ন করবে, যেমন #3498db, #2ecc71, #f39c12 ইত্যাদি।

একাধিক Map একত্রে মিশ্রণ

আপনি একাধিক Map কে map-merge() ফাংশন ব্যবহার করে একত্রে মিশ্রিত (merge) করতে পারেন।

$primary-colors: (
  "primary": #3498db,
  "secondary": #2ecc71
);

$additional-colors: (
  "tertiary": #e74c3c,
  "quaternary": #f39c12
);

$all-colors: map-merge($primary-colors, $additional-colors);

এখানে, $primary-colors এবং $additional-colors দুটি আলাদা Map মিশিয়ে একটি নতুন Map $all-colors তৈরি করা হয়েছে।

ব্যবহারিক উদাহরণ

ধরা যাক, আপনি একটি CSS ফাইল তৈরি করতে চান যেখানে বিভিন্ন button colors কে Map ব্যবহার করে পরিচালনা করবেন:

$button-colors: (
  "default": #3498db,
  "hover": #2980b9,
  "active": #1f6a8c
);

.button {
  background-color: map-get($button-colors, "default");
  &:hover {
    background-color: map-get($button-colors, "hover");
  }
  &:active {
    background-color: map-get($button-colors, "active");
  }
}

এখানে, $button-colors Map তৈরি করে বিভিন্ন button states (default, hover, active) এর জন্য আলাদা রং সংরক্ষণ করা হয়েছে এবং map-get() ব্যবহার করে সেগুলি প্রয়োগ করা হয়েছে।

সারাংশ

Sass Map একটি শক্তিশালী ডেটা স্ট্রাকচার যা key-value pairs পরিচালনা করতে সাহায্য করে। এটি CSS-এ রঙ, সাইজ, টেক্সট স্টাইল এবং অন্যান্য প্রোপার্টি গুলি খুব সহজে এবং ডাইনামিকভাবে সংরক্ষণ করতে সহায়তা করে। map-get(), map-merge(), map-remove(), map-keys(), এবং map-values() ফাংশনগুলো ব্যবহার করে আপনি Map এর মধ্যে ডেটা সহজেই প্রবাহিত এবং পরিচালনা করতে পারেন, যা কোডের পুনঃব্যবহারযোগ্যতা এবং পরিচালনক্ষমতা বাড়ায়।