SASS-এর `if` ফাংশন
এই নিবন্ধে SASS-এর if ফাংশন ব্যাখ্যা করা হয়েছে।
আমরা if ফাংশনের মৌলিক বিষয় থেকে উন্নত কৌশল পর্যন্ত ধাপে ধাপে আলোচনা করব।
YouTube Video
SASS-এর if ফাংশন
if() ফাংশনটি SASS প্রদত্ত একটি সহজ শর্তাধীন ফাংশন, যা একটি বুলিয়ান শর্তের ভিত্তিতে দুইটির মধ্যে একটি মান ফেরত দেয়। এটি JavaScript-এর ternary অপারেটরের মতো।
সিনট্যাক্স
সিনট্যাক্সটি নিম্নরূপ:।
1// if(condition, trueValue, falseValue)conditionযদি true হয়, তবে এটিtrueValueফেরত দেয়; আর false হলেfalseValueফেরত দেয়।
প্রাথমিক ব্যবহার
উদাহরণস্বরূপ, থিম dark নাকি light তার উপর ভিত্তি করে ব্যাকগ্রাউন্ড ও টেক্সটের রং পরিবর্তন করতে আপনি if() ফাংশন ব্যবহার করতে পারেন।
নমুনা কোড
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}$themeভেরিয়েবলটি"dark"হলে ব্যাকগ্রাউন্ড হবে কালো এবং টেক্সট সাদা;"light"হলে ব্যাকগ্রাউন্ড সাদা এবং টেক্সট কালো হবে।
জেনারেট হওয়া CSS
1body {
2 background-color: black;
3 color: white;
4}$themeভেরিয়েবলটি"dark"হওয়ায় ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা।
@if স্টেটমেন্ট এবং if() ফাংশনের মধ্যে পার্থক্যসমূহ
শর্তভিত্তিক ব্রাঞ্চিংয়ের জন্য Sass @if স্টেটমেন্ট এবং if() ফাংশন সরবরাহ করে, তবে এগুলো ভিন্ন উদ্দেশ্যে ব্যবহৃত হয়।
নমুনা কোড
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@ifস্টেটমেন্ট Sass কম্পাইলের সময় কোন কোড আউটপুট হবে তা নিয়ন্ত্রণ করে।- অপরদিকে,
if()ফাংশন একটি মান রিটার্ন করে এবং এক্সপ্রেশনের মধ্যে মানগুলো গতিশীলভাবে বদলাতে ব্যবহৃত হয়।
জেনারেট হওয়া CSS
1body {
2 background-color: black;
3 color: white;
4}- এই উদাহরণে,
$theme"dark"হওয়ায় কালো ব্যাকগ্রাউন্ড এবং সাদা টেক্সটের রঙ প্রয়োগ করা হয়। - দুটি প্রধান পার্থক্য হলো
@ifস্টেটমেন্ট কাঠামো নিয়ন্ত্রণ করে, আরif()ফাংশন একটি মান রিটার্ন করে।
নেস্টেড if ফাংশন ব্যবহার
জটিল ব্রাঞ্চিং প্রয়োজন হলে if ফাংশনগুলো নেস্ট করতে পারেন।
নমুনা কোড
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}$themeযদি"dark"হয়, তবে এটি কালো ফেরত দেয়;"light"হলে সাদা; নতুবা ডিফল্ট মান ($custom-color) ফেরত দেয়।
জেনারেট হওয়া CSS
1body {
2 background-color: blue;
3}$themeভেরিয়েবলটিcustomহওয়ায় ব্যাকগ্রাউন্ডের রং নীল।
ব্যবহারিক ব্যবহারক্ষেত্র
থিম পরিবর্তন
নীচে থিম অনুযায়ী বোতামের স্টাইল পরিবর্তনের একটি উদাহরণ দেওয়া হল।
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- এই কোডটি SASS-এর একটি শর্তাধীন উদাহরণ, যা
$themeভেরিয়েবলের মান অনুযায়ী বোতামের ব্যাকগ্রাউন্ড, টেক্সট ও বর্ডারের রং বদলায়।if()ফাংশনটি dark ও light থিমের জন্য স্টাইল ডাইনামিকভাবে নির্ধারণ করতে ব্যবহার করা হয়েছে।
জেনারেট হওয়া CSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- থিম বদলালে আপনি পুরো ডিজাইনটি একযোগে পরিবর্তন করতে পারেন।
উন্নত উদাহরণ: রঙের কনট্রাস্ট ডাইনামিকভাবে সেট করা
চলুন ব্যাকগ্রাউন্ড রং অনুযায়ী স্বয়ংক্রিয়ভাবে টেক্সটের রং নির্ধারণের একটি উদাহরণ দেখি।
নমুনা কোড
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()ফাংশনটি ব্যাকগ্রাউন্ড রঙের লাইটনেস (lightness) প্রাপ্ত করতে ব্যবহৃত হয়। ওই মানটি যদি50%-এর বেশি হয়, কালো বেছে নেওয়া হয়; যদি কম হয়, টেক্সটের রঙ হিসেবে সাদা বেছে নেওয়া হয়—ফলে ব্যাকগ্রাউন্ডের সাথে কনট্রাস্ট স্বয়ংক্রিয়ভাবে অপ্টিমাইজ হয়।
জেনারেট হওয়া CSS
1body {
2 background-color: #000;
3 color: white;
4}if()ফাংশন ব্যবহার করে কনট্রাস্ট সমন্বয়সহ ডিজাইন অ্যাক্সেসিবিলিটি বিবেচনায় রেখে নমনীয় স্টাইল বাস্তবায়ন করতে পারেন।
@function এর সাথে সমন্বয়
@function এর ভিতরে if ফাংশন ব্যবহার করলে আরও নমনীয় স্টাইল ডিজাইন করা যায়।
নমুনা কোড
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- এই কোডে থিম ও কালার টাইপের ভিত্তিতে উপযুক্ত রং ফেরত দেওয়ার জন্য
@functionএর ভিতরেif()ব্যবহারের নমুনা দেখানো হয়েছে। এতে প্রত্যেক থিমের জন্য সঙ্গতিপূর্ণ ও পুনঃব্যবহারযোগ্য স্টাইল ডিজাইন সম্ভব হয়।
জেনারেট হওয়া CSS
1body {
2 background-color: black;
3 color: white;
4}if()ফাংশনকে কাজে লাগিয়ে হেল্পার ফাংশন তৈরি ও ব্যবহার করলে পুরো প্রজেক্টের রক্ষণাবেক্ষণযোগ্যতা উন্নত করা যায়।
নোটস
-
ifফাংশন ডাইনামিক মানের সাথে ব্যবহার করা যায় না CSS নিজেই একটি স্ট্যাটিক ভাষা বলেifফাংশনটি SASS কম্পাইল হওয়ার সময়ই মান নির্ধারণ করে। রানটাইম শর্তাধীন লজিকের জন্য আপনাকে JavaScript ব্যবহার করতে হবে। -
পাঠযোগ্যতাকে অগ্রাধিকার দিন নেস্টেড
ifফাংশন জটিল হয়ে যেতে পারে এবং পাঠযোগ্যতাকে ক্ষতিগ্রস্ত করতে পারে, তাই আপনার কোড সংগঠিত রাখতে প্রয়োজন অনুযায়ী SASS@mixinএবং@functionব্যবহার করতে পারেন।
উপসংহার
SASS-এর if ফাংশন একটি শক্তিশালী টুল, যা শর্ত অনুযায়ী ভিন্ন ভিন্ন মান ফেরত দেয়। এটি শুধু সাধারণ শর্তের জন্য নয়, থিম পরিবর্তন ও ডাইনামিক স্টাইল সেটিংসসহ নানা ক্ষেত্রে উপকারী। তবে জটিল শর্ত সামলাতে গেলে পাঠযোগ্যতার দিকটি খেয়াল রাখুন এবং রক্ষণাবেক্ষণযোগ্যতা বাড়াতে @mixin ও @function কাজে লাগান।
if ফাংশনে দক্ষতা অর্জন করলে আপনি আরও কার্যকর ও নমনীয় স্টাইল ডিজাইন করতে পারবেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।