ডিফল্ট ভ্যারিয়েবল এবং কন্ডিশনাল ভ্যারিয়েবল

সাস (Sass) কি?

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

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

ডিফল্ট ভ্যারিয়েবল (Default Variables) সাসে

ডিফল্ট ভ্যারিয়েবল সাসে এমন ভ্যারিয়েবল হতে পারে যার জন্য একটি ডিফল্ট মান নির্ধারণ করা হয়। যখন আপনি একটি ভ্যারিয়েবল নির্দিষ্ট মান দিয়ে সেট না করেন, তখন সাস ওই ডিফল্ট মানটি ব্যবহার করবে।

ডিফল্ট ভ্যারিয়েবল ব্যবহার করার উদাহরণ:

$primary-color: #3498db !default;

body {
  background-color: $primary-color;
}

এখানে, $primary-color ভ্যারিয়েবলটি ডিফল্টভাবে #3498db দিয়ে সেট করা হয়েছে। তবে, আপনি যদি অন্য কোথাও $primary-color ভ্যারিয়েবলটি নির্ধারণ করেন, তাহলে সেটি ওই নতুন মান গ্রহণ করবে, কিন্তু আপনি যদি এটি নির্দিষ্ট না করেন, তবে ডিফল্ট মান #3498db ব্যবহৃত হবে।

ডিফল্ট ভ্যারিয়েবল এর সুবিধা:

• ইনফ্লেক্সিবল কনফিগারেশন: একটি ডিফল্ট মান দিয়ে কাজ করলে আপনি প্রোজেক্টের অন্যান্য অংশে এটি ব্যবহার করতে পারেন এবং প্রয়োজনে সহজে পরিবর্তন করতে পারেন।
• স্টাইলিং কাস্টমাইজেশন: ডিফল্ট ভ্যারিয়েবল ব্যবহার করে কোডের বিভিন্ন অংশ কাস্টমাইজ করা সহজ হয়।

কন্ডিশনাল ভ্যারিয়েবল (Conditional Variables) সাসে

কন্ডিশনাল ভ্যারিয়েবল ব্যবহার করে আপনি একটি নির্দিষ্ট শর্তের ভিত্তিতে ভ্যারিয়েবলের মান নির্ধারণ করতে পারেন। সাসে, আপনি কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে কিছু শর্তে ভ্যারিয়েবলের মান পরিবর্তন করতে পারেন।

কন্ডিশনাল ভ্যারিয়েবল ব্যবহার করার উদাহরণ:

$theme: light;

$background-color: if($theme == light, #fff, #333);

body {
  background-color: $background-color;
}

এখানে, $theme ভ্যারিয়েবলটি যদি light হয়, তবে $background-color হবে #fff, এবং যদি dark হয়, তবে $background-color হবে #333।

কন্ডিশনাল স্টেটমেন্টের আরও উদাহরণ:

$device: mobile;

$font-size: if($device == mobile, 14px, 16px);

h1 {
  font-size: $font-size;
}

এখানে, $device ভ্যারিয়েবলের মানের উপর ভিত্তি করে, font-size পরিবর্তিত হবে। যদি $device এর মান mobile হয়, তবে font-size হবে 14px, অন্যথায় এটি 16px হবে।

কন্ডিশনাল ভ্যারিয়েবল এর সুবিধা:

• ডাইনামিক কনফিগারেশন: নির্দিষ্ট শর্তের ভিত্তিতে ভ্যারিয়েবলের মান পরিবর্তন করার মাধ্যমে কোড আরো ডাইনামিক এবং কাস্টমাইজযোগ্য হয়ে ওঠে।
• রেসপনসিভ ডিজাইন: বিভিন্ন ডিভাইসের জন্য কন্ডিশনাল স্টাইলিং করার জন্য খুবই উপকারী।

সাসে ভ্যারিয়েবল সংক্রান্ত অন্যান্য কার্যকারিতা

1. ভ্যারিয়েবল ডিক্লেয়ারেশন: সাসে আপনি যে কোনো ধরনের ডেটা টাইপ (যেমন: সংখ্যা, রঙ, ফন্ট) ভ্যারিয়েবলে সংরক্ষণ করতে পারেন।

   $font-size: 16px;
   $main-color: #ff6347;
   

2. ভ্যারিয়েবলগুলি ব্যবহার করা: ভ্যারিয়েবল ব্যবহার করার মাধ্যমে CSS প্রোপার্টিগুলি আরো সহজভাবে কনফিগার করা যায়।

   body {
     font-size: $font-size;
     color: $main-color;
   }
   

3. ম্যাপস: সাসে ভ্যারিয়েবল হিসেবে ম্যাপও ব্যবহার করা যায়, যা বিভিন্ন কীগুলির সাথে মান যুক্ত করে।

   $colors: (primary: #ff6347, secondary: #3498db);
   
   body {
     background-color: map-get($colors, primary);
   }
   

4. ভ্যারিয়েবল স্কোপ: সাসে ভ্যারিয়েবল সাধারণত গ্লোবাল স্কোপে থাকে, কিন্তু অভ্যন্তরীণ ভ্যারিয়েবল এবং লোকাল স্কোপও হতে পারে।

সারাংশ

ডিফল্ট ভ্যারিয়েবল এবং কন্ডিশনাল ভ্যারিয়েবল সাসে খুবই গুরুত্বপূর্ণ ফিচার যা CSS লেখার প্রক্রিয়াকে আরও ডাইনামিক এবং কাস্টমাইজেবল করে তোলে। ডিফল্ট ভ্যারিয়েবল ব্যবহার করে আপনি একটি নির্দিষ্ট মান দিয়ে কাজ শুরু করতে পারেন এবং কন্ডিশনাল ভ্যারিয়েবল ব্যবহার করে বিভিন্ন শর্তের ভিত্তিতে ভ্যারিয়েবলের মান নির্ধারণ করতে পারেন। সাসে এই ধরনের ভ্যারিয়েবল ব্যবহারের মাধ্যমে কোড আরও পরিষ্কার, রক্ষণাবেক্ষণযোগ্য এবং স্কেলেবল হয়।