String, Number, List এবং Map Functions ব্যবহার করা

Sass (Syntactically Awesome Stylesheets) এর পরিচিতি

Sass হল একটি প্রিপ্রসেসর যা CSS এর উপর ভিত্তি করে কাজ করে এবং অতিরিক্ত ফিচার সরবরাহ করে যেমন ভেরিয়েবলস, নেস্টিং, মিক্সিন্স, ফাংশন ইত্যাদি। এটি CSS এর একটি শক্তিশালী সংস্করণ যা কোডকে আরও সংক্ষিপ্ত এবং রিডেবল বানাতে সাহায্য করে।

Sass এ বেশ কিছু বিল্ট-ইন ফাংশন আছে যা আপনার স্টাইলশীট কোডে আরও কার্যকরীতা যোগ করতে পারে। এই গাইডে, আমরা String, Number, List, এবং Map ফাংশনগুলির ব্যবহার নিয়ে আলোচনা করব।

১. String Functions

Sass এর String Functions আপনাকে স্ট্রিংগুলোর সাথে কাজ করার জন্য নানা ধরনের ফাংশন প্রদান করে। এখানে কিছু সাধারণ স্ট্রিং ফাংশনের উদাহরণ দেওয়া হলো।

১.১. unquote()

এই ফাংশনটি একটি স্ট্রিং থেকে কোটেশন চিহ্ন সরিয়ে ফেলে।

$quoted-text: '"Hello, Sass!"';
$unquoted-text: unquote($quoted-text);

body {
  content: $unquoted-text; // Output: Hello, Sass!
}

১.২. quote()

এই ফাংশনটি একটি স্ট্রিংকে কোটেশন চিহ্নের মধ্যে আবদ্ধ করে।

$unquoted-text: Hello, Sass!;
$quoted-text: quote($unquoted-text);

body {
  content: $quoted-text; // Output: "Hello, Sass!"
}

১.৩. str-length()

এই ফাংশনটি একটি স্ট্রিং এর দৈর্ঘ্য রিটার্ন করে।

$my-text: "Hello, world!";
$text-length: str-length($my-text);

body {
  content: $text-length; // Output: 13
}

১.৪. str-index()

এই ফাংশনটি একটি স্ট্রিং এর মধ্যে একটি নির্দিষ্ট সাবস্ট্রিং খুঁজে বের করে এবং এর প্রথম পজিশন রিটার্ন করে।

$my-text: "Hello, world!";
$index: str-index($my-text, "world");

body {
  content: $index; // Output: 8
}

২. Number Functions

Sass এর Number Functions আপনাকে সংখ্যা নিয়ে কাজ করার জন্য বেশ কিছু শক্তিশালী ফাংশন প্রদান করে।

২.১. abs()

এই ফাংশনটি একটি সংখ্যার অ্যাবসোলিউট মান রিটার্ন করে।

$number: -5;
$absolute-number: abs($number);

body {
  content: $absolute-number; // Output: 5
}

২.২. ceil()

এই ফাংশনটি একটি ভগ্নাংশ সংখ্যাকে উপরের পূর্ণসংখ্যায় রাউন্ড করে।

$number: 4.3;
$rounded-number: ceil($number);

body {
  content: $rounded-number; // Output: 5
}

২.৩. floor()

এই ফাংশনটি একটি ভগ্নাংশ সংখ্যাকে নীচের পূর্ণসংখ্যায় রাউন্ড করে।

$number: 4.7;
$rounded-number: floor($number);

body {
  content: $rounded-number; // Output: 4
}

২.৪. percentage()

এই ফাংশনটি একটি সংখ্যা প্রাপ্তির শতাংশ রিটার্ন করে।

$number: 0.5;
$percentage: percentage($number);

body {
  content: $percentage; // Output: 50%
}

৩. List Functions

Sass এর List Functions আপনাকে তালিকা (arrays) নিয়ে কাজ করার জন্য ব্যবহার করতে পারেন।

৩.১. length()

এই ফাংশনটি একটি তালিকার দৈর্ঘ্য রিটার্ন করে।

$colors: red, blue, green;
$list-length: length($colors);

body {
  content: $list-length; // Output: 3
}

৩.২. nth()

এই ফাংশনটি তালিকার একটি নির্দিষ্ট পজিশনের আইটেম রিটার্ন করে।

$colors: red, blue, green;
$second-color: nth($colors, 2);

body {
  content: $second-color; // Output: blue
}

৩.৩. join()

এই ফাংশনটি দুটি বা ততোধিক তালিকা একত্রিত করে একটি নতুন তালিকা তৈরি করে।

$list1: red, blue;
$list2: green, yellow;
$combined-list: join($list1, $list2);

body {
  content: $combined-list; // Output: red, blue, green, yellow
}

৩.৪. index()

এই ফাংশনটি একটি তালিকায় একটি নির্দিষ্ট উপাদান খুঁজে বের করে এবং তার ইনডেক্স রিটার্ন করে।

$colors: red, blue, green;
$index: index($colors, blue);

body {
  content: $index; // Output: 2
}

৪. Map Functions

Sass এর Map Functions আপনাকে key-value পেয়ার নিয়ে কাজ করার জন্য সাহায্য করে।

৪.১. map-get()

এই ফাংশনটি একটি মাপ (map) এর মধ্যে একটি নির্দিষ্ট কী এর মান রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff, green: #00ff00);
$blue-color: map-get($colors, blue);

body {
  background-color: $blue-color; // Output: #0000ff
}

৪.২. map-set()

এই ফাংশনটি একটি মাপে একটি নতুন কী-ভ্যালু পেয়ার সেট করে।

$colors: (red: #ff0000, blue: #0000ff);
$colors: map-set($colors, yellow, #ffff00);

body {
  background-color: map-get($colors, yellow); // Output: #ffff00
}

৪.৩. map-keys()

এই ফাংশনটি একটি মাপের সমস্ত কীগুলির একটি তালিকা রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff);
$keys: map-keys($colors);

body {
  content: $keys; // Output: red, blue
}

৪.৪. map-values()

এই ফাংশনটি একটি মাপের সমস্ত মানের একটি তালিকা রিটার্ন করে।

$colors: (red: #ff0000, blue: #0000ff);
$values: map-values($colors);

body {
  content: $values; // Output: #ff0000, #0000ff
}

সারাংশ

Sass এর String, Number, List, এবং Map ফাংশনগুলির মাধ্যমে আপনি স্টাইলশীট কোডের কার্যকারিতা বৃদ্ধি করতে পারেন। এই ফাংশনগুলি আপনাকে ডেটা ম্যানিপুলেশন, গণনা, তালিকা এবং মানের সাথে কাজ করতে সহায়তা করে। String ফাংশন স্ট্রিং সংশোধন এবং ম্যানিপুলেশনের জন্য, Number ফাংশন গণনা এবং সংখ্যা নিয়ে কাজ করার জন্য, List ফাংশন তালিকা প্রক্রিয়াকরণ এবং Map ফাংশন ডেটার key-value সম্পর্ক ব্যবস্থাপনার জন্য ব্যবহৃত হয়। Sass-এর এই ফাংশনগুলো CSS লেখার সময় কোডকে আরও রিডেবল, কমপ্যাক্ট এবং সহজে রক্ষণাবেক্ষণযোগ্য করে তোলে।