Sass এর Control Directives এর বাস্তব উদাহরণ

Sass এর Control Directives

Sass (Syntactically Awesome Stylesheets) হল CSS এর একটি শক্তিশালী প্রিপ্রসেসর, যা CSS এর পাশাপাশি আরও অনেক কার্যকরী ফিচার প্রদান করে। এর মধ্যে একটি গুরুত্বপূর্ণ ফিচার হলো Control Directives, যা আপনাকে শর্তাবলী (conditional statements) এবং লুপগুলোর সাহায্যে স্টাইল শীটের মধ্যে লজিক যোগ করতে সক্ষম করে। এর মাধ্যমে আপনি ডাইনামিক স্টাইল শীট তৈরি করতে পারেন যা পুনঃব্যবহারযোগ্য এবং আরও শক্তিশালী।

Sass এর Control Directives মূলত @if, @else, @for, @each, এবং @while এই ডিরেকটিভগুলির মাধ্যমে কাজ করে। এসব ডিরেকটিভগুলি আপনি স্টাইল শীটে লজিক্যাল ফাংশনালিটি যোগ করতে ব্যবহার করতে পারবেন।

১. @if এবং @else

@if এবং @else ডিরেকটিভের মাধ্যমে আপনি শর্ত অনুযায়ী CSS তৈরি করতে পারেন। এটি if-else লজিকের মতো কাজ করে।

উদাহরণ:

$theme: light;

.button {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

এখানে, $theme ভেরিয়েবল যদি light হয়, তাহলে .button এর ব্যাকগ্রাউন্ড সাদা এবং টেক্সট কালো হবে, আর অন্যথায় ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা হবে।

২. @for লুপ

@for ডিরেকটিভটি একটি নির্দিষ্ট পরিসরের মধ্যে লুপ চালানোর জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি CSS প্রপার্টির জন্য পুনরাবৃত্তি করতে পারেন।

উদাহরণ:

@for $i from 1 to 5 {
  .item-#{$i} {
    width: 20px * $i;
    height: 20px * $i;
  }
}

এখানে, @for লুপ ১ থেকে ৫ পর্যন্ত আইটেম তৈরি করবে এবং প্রতিটি আইটেমের আকার বৃদ্ধি পাবে, যেমন:

• .item-1 এর সাইজ হবে 20px x 20px
• .item-2 এর সাইজ হবে 40px x 40px
• .item-3 এর সাইজ হবে 60px x 60px, এবং আরও।

৩. @each লুপ

@each ডিরেকটিভটি একটি লিস্ট বা অ্যারের উপর লুপ চালানোর জন্য ব্যবহৃত হয়। এটি যখন আপনি কোনো সিরিজ বা কালার স্কিমের জন্য স্টাইল তৈরি করতে চান, তখন খুবই কার্যকরী।

উদাহরণ:

$colors: red, green, blue;

@each $color in $colors {
  .#{$color} {
    color: $color;
  }
}

এখানে, @each লুপটি $colors লিস্টের প্রতিটি ভ্যালুর জন্য একটি ক্লাস তৈরি করবে:

• .red { color: red; }
• .green { color: green; }
• .blue { color: blue; }

এটি আপনাকে কোড পুনরাবৃত্তি এড়াতে সাহায্য করে।

৪. @while লুপ

@while ডিরেকটিভটি একটি শর্তপূর্ণ লুপ চালানোর জন্য ব্যবহৃত হয়, যা একটি নির্দিষ্ট শর্ত পূর্ণ না হওয়া পর্যন্ত চলে। এটি সাধারণত ডাইনামিক স্টাইল শীট তৈরির জন্য ব্যবহৃত হয়।

উদাহরণ:

$i: 1;

@while $i <= 5 {
  .item-#{$i} {
    width: 20px * $i;
    height: 20px * $i;
  }
  $i: $i + 1;
}

এখানে, @while লুপটি $i এর মান ৫ পর্যন্ত বাড়িয়ে দিয়ে .item-1 থেকে .item-5 পর্যন্ত ক্লাস তৈরি করবে, এবং প্রতিটি আইটেমের সাইজের মান বাড়াবে।

৫. নেস্টেড কন্ডিশনাল লজিক

Sass এ আপনি শর্ত অনুযায়ী CSS স্টাইল নিয়ে আরও জটিল লজিক তৈরি করতে পারেন, যেখানে একাধিক @if, @else if, এবং @else ডিরেকটিভ ব্যবহার করা হয়।

উদাহরণ:

$theme: light;
$size: large;

.button {
  @if $theme == light {
    background-color: white;
    color: black;
    @if $size == large {
      padding: 20px;
    } @else {
      padding: 10px;
    }
  } @else {
    background-color: black;
    color: white;
    @if $size == large {
      padding: 20px;
    } @else {
      padding: 10px;
    }
  }
}

এখানে, একদিকে থিম light হলে এবং অন্যদিকে সাইজ large হলে প্যাডিং বড় হবে। অন্যথায়, সাইজ ছোট হবে। একইভাবে, থিম অন্ধকার হলে সেসব সেটিংস প্রয়োগ করা হবে।

সারাংশ

Sass এর Control Directives CSS এর মধ্যে লজিক এবং প্রোগ্রামিং কৌশল যোগ করার জন্য একটি শক্তিশালী উপায়। @if, @else, @for, @each, এবং @while এই ডিরেকটিভগুলির মাধ্যমে আপনি CSS কোড আরও ডাইনামিক এবং শক্তিশালী করতে পারেন। এটি বড় এবং স্কেলেবেল প্রোজেক্টের জন্য খুবই কার্যকরী, যেখানে কোডের পুনরাবৃত্তি এবং জটিলতার স্তর কমাতে সাহায্য করে। Sass এ Control Directives ব্যবহারের মাধ্যমে আপনি কোড আরও সংক্ষিপ্ত, পুনরাবৃত্তিযোগ্য এবং রিডেবল করতে পারেন।