Built-in Functions দিয়ে CSS কাস্টমাইজ করা

সাস (Sass) এর পরিচিতি

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর, যা CSS কে আরও শক্তিশালী এবং কার্যকরী বানাতে সাহায্য করে। Sass-এ ব্যবহারকারীরা variables, mixins, functions, nesting, এবং আরও অনেক ফিচার ব্যবহার করতে পারেন, যা CSS লেখার সময় পুনঃব্যবহারযোগ্যতা এবং মানোন্নয়ন সম্ভব করে তোলে। Built-in functions হল সাসের এক গুরুত্বপূর্ণ বৈশিষ্ট্য যা CSS কাস্টমাইজেশনে সাহায্য করে এবং ডেভেলপারদের কাজ সহজ করে।

Sass-এ কিছু built-in functions প্রদান করা হয় যা বিভিন্ন ধরনের কাজ করার জন্য ব্যবহৃত হয়, যেমন রং, গণনা, স্ট্রিং এবং লিস্ট সম্পর্কিত কাজ ইত্যাদি। এই ফাংশনগুলির সাহায্যে CSS কোড আরও ক্লিন, ডায়নামিক এবং মডুলার করা যায়।

Sass Built-in Functions এর ব্যবহার

Sass এর built-in functions বিভিন্ন ধরনের কাজ সহজে করার জন্য ব্যবহৃত হয়। এখানে কিছু জনপ্রিয় built-in functions এর ব্যবহার আলোচনা করা হবে।

১. Color Functions

Sass-এর color functions আপনাকে রং সম্পর্কিত বিভিন্ন কাজ করতে সাহায্য করে। এই ফাংশনগুলোতে lighten(), darken(), mix(), saturate(), ইত্যাদি অন্তর্ভুক্ত।

lighten() এবং darken():

এই ফাংশনগুলো ব্যবহার করে আপনি কোন নির্দিষ্ট রংকে হালকা বা গা dark করতে পারেন।

$primary-color: #3498db;

.button {
  background-color: lighten($primary-color, 20%); // 20% হালকা রঙ
  color: darken($primary-color, 10%); // 10% গা dark রঙ
}

এখানে, lighten() ফাংশনটি মূল রঙটিকে ২০% হালকা করে, এবং darken() ফাংশনটি ১০% গা dark করে দেয়।

mix():

mix() ফাংশন দুটি রঙ মিশিয়ে নতুন একটি রঙ তৈরি করতে ব্যবহার হয়।

$color1: #3498db;
$color2: #e74c3c;

.button {
  background-color: mix($color1, $color2, 50%); // দুটি রঙ ৫০% মিশ্রিত
}

এখানে, mix() ফাংশন দুটি রঙ মিশিয়ে ৫০% অনুপাতে একটি নতুন রঙ তৈরি করে।

২. Math Functions

Sass আপনাকে গণনার জন্য কিছু built-in functions প্রদান করে, যেমন +, -, *, / ইত্যাদি।

percentage():

এই ফাংশনটি সংখ্যাকে শতাংশে রূপান্তর করতে ব্যবহৃত হয়।

$width: 500px;
$parent-width: 1000px;

.child {
  width: percentage($width / $parent-width); // 50%
}

এখানে, percentage() ফাংশনটি গণনা করা অনুপাতের ফলাফলকে শতকরা হিসাবে রূপান্তর করে।

abs():

abs() ফাংশনটি একটি সংখ্যা থেকে তার মানের (অবিচ্ছিন্ন) পরিমাণ প্রদান করে।

$margin: -20px;

.container {
  margin-top: abs($margin); // 20px
}

এখানে, abs() ফাংশনটি নেতিবাচক মানের পরিমাণ ২০px প্রদান করে।

৩. String Functions

Sass আপনাকে স্ট্রিং নিয়ে কাজ করার জন্য কিছু built-in functions প্রদান করে। এই ফাংশনগুলির মধ্যে unquote(), quote(), str-length() ইত্যাদি অন্তর্ভুক্ত।

quote() এবং unquote():

quote() ফাংশনটি একটি স্ট্রিংকে উদ্ধৃতির মধ্যে রাখে, আর unquote() ফাংশনটি উদ্ধৃতির বাইরে এনে দেয়।

$font-family: Helvetica;

h1 {
  font-family: quote($font-family); // "Helvetica"
}

h2 {
  font-family: unquote("Arial"); // Arial
}

এখানে, quote() এবং unquote() স্ট্রিংয়ের উদ্ধৃতি পরিবর্তন করতে ব্যবহৃত হয়েছে।

str-length():

str-length() ফাংশনটি একটি স্ট্রিংয়ের দৈর্ঘ্য নির্ধারণ করে।

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

p {
  font-size: $length; // 13px
}

এখানে, str-length() ফাংশনটি "Hello, World!" স্ট্রিংয়ের দৈর্ঘ্য ১৩ রিটার্ন করে।

৪. List Functions

Sass-এ list সম্পর্কিত কিছু ফাংশন রয়েছে, যেমন nth(), join(), length() ইত্যাদি, যা লিস্ট বা অ্যারে সম্পর্কিত কাজ করতে ব্যবহৃত হয়।

nth():

nth() ফাংশনটি একটি নির্দিষ্ট ইনডেক্সে থাকা মান রিটার্ন করে।

$list: 10px, 20px, 30px;

.item {
  margin-top: nth($list, 2); // 20px
}

এখানে, nth() ফাংশনটি $list থেকে দ্বিতীয় মানটি রিটার্ন করেছে, যা ২০px।

length():

length() ফাংশনটি একটি লিস্ট বা অ্যারের দৈর্ঘ্য রিটার্ন করে।

$list: 10px, 20px, 30px;
$length: length($list); // 3

.container {
  width: $length * 10px; // 30px
}

এখানে, length() ফাংশনটি $list এর দৈর্ঘ্য ৩ রিটার্ন করেছে এবং সেটি পরে গণনায় ব্যবহৃত হয়েছে।

৫. Other Useful Functions

map-get():

map-get() ফাংশনটি একটি মেপ (অবজেক্ট) থেকে একটি নির্দিষ্ট কীগুলোর মান রিটার্ন করে।

$map: (primary: #3498db, secondary: #e74c3c);

.button {
  background-color: map-get($map, primary); // #3498db
}

এখানে, map-get() ফাংশনটি $map থেকে primary কীর মান রিটার্ন করেছে।

random():

random() ফাংশনটি একটি র্যান্ডম সংখ্যা রিটার্ন করে।

$random-num: random(100);

.container {
  width: $random-num + px;
}

এখানে, random() ফাংশনটি ১ থেকে ১০০ এর মধ্যে একটি র্যান্ডম সংখ্যা রিটার্ন করেছে।

সারাংশ

Sass Built-in Functions ব্যবহার করে CSS আরও শক্তিশালী এবং ডায়নামিক করা যায়। এই ফাংশনগুলো ব্যবহার করে আপনি রং, গণনা, স্ট্রিং, লিস্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি CSS কোডকে আরও কার্যকরী এবং পুনঃব্যবহারযোগ্য করতে পারেন, এবং ডেভেলপারদের কাজের গতি এবং কোডের মান উন্নত করতে সাহায্য করে। Sass এর বেসিক ফিচারগুলো, যেমন variables, mixins, functions এবং nesting এর সাথে এই built-in functions ব্যবহারের মাধ্যমে আপনি আরও উন্নত CSS তৈরি করতে পারবেন।