লুপের মাধ্যমে পুনরাবৃত্তিমূলক CSS তৈরি করা

Sass Control Directives - সাস (Sass) - Web Development

253

Sass এবং লুপ

Sass (Syntactically Awesome Stylesheets) হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা CSS কে আরও শক্তিশালী এবং ডাইনামিক করে তোলে। এটি CSS কোড লেখার জন্য অনেক সুবিধা প্রদান করে, যেমন ভেরিয়েবল, মিক্সিন, ফাংশন, এবং লুপ। লুপ ব্যবহার করে আপনি একাধিক সিলেক্টর বা স্টাইল একত্রে তৈরি করতে পারেন, যা কোডের পুনরাবৃত্তি কমায় এবং CSS লেখার প্রক্রিয়াকে আরও সহজ করে তোলে।

এই গাইডে, আমরা দেখব কিভাবে Sass এর লুপ ব্যবহার করে পুনরাবৃত্তিমূলক CSS কোড তৈরি করা যায়, যা ডেভেলপমেন্টের সময় খুবই কার্যকরী।

Sass-এ লুপের ব্যবহার

Sass এ বিভিন্ন ধরনের লুপ রয়েছে, যেমন @for, @each, এবং @while। এগুলোর মাধ্যমে আপনি CSS স্টাইলের বিভিন্ন উপাদান গুলি পুনরাবৃত্তি করে সহজেই তৈরি করতে পারেন।

১. `@for` লুপ

@for লুপ ব্যবহার করে নির্দিষ্ট রেঞ্জের মধ্যে স্টাইলস তৈরি করা যায়। এটি একটি শুরুর মান থেকে একটি শেষ মান পর্যন্ত লুপ চালায়।

উদাহরণ:

ধরা যাক, আপনাকে ১ থেকে ৫ পর্যন্ত নম্বরের জন্য ক্লাস তৈরি করতে হবে:

@for $i from 1 through 5 {
  .box-#{$i} {
    width: $i * 100px;
    height: $i * 100px;
    background-color: rgba(0, 0, 255, 0.2 * $i);
  }
}

এখানে, @for লুপ ব্যবহার করে ১ থেকে ৫ পর্যন্ত ক্লাস তৈরি করা হয়েছে, এবং প্রতিটি ক্লাসের জন্য width, height, এবং background-color নির্ধারণ করা হয়েছে। প্রতিটি ক্লাসে #{$i} সিঙ্কট্যাক্সের মাধ্যমে সংখ্যা যোগ করা হচ্ছে।

আউটপুট:

.box-1 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 255, 0.2);
}

.box-2 {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 255, 0.4);
}

.box-3 {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 255, 0.6);
}

.box-4 {
  width: 400px;
  height: 400px;
  background-color: rgba(0, 0, 255, 0.8);
}

.box-5 {
  width: 500px;
  height: 500px;
  background-color: rgba(0, 0, 255, 1);
}

এখানে, @for লুপটি ১ থেকে ৫ পর্যন্ত ক্লাস তৈরি করছে, প্রতিটি ক্লাসের জন্য ভিন্ন সাইজ এবং ব্যাকগ্রাউন্ড কালার অ্যাসাইন করা হচ্ছে।

২. `@each` লুপ

@each লুপটি সাধারণত এমন ডেটা কালেকশন (যেমন অ্যারে বা ম্যাপ) এর উপর লুপ চালানোর জন্য ব্যবহৃত হয়।

উদাহরণ:

ধরা যাক, আমাদের কাছে একটি অ্যারে আছে এবং আমরা এই অ্যারের উপাদানগুলির জন্য CSS ক্লাস তৈরি করতে চাই:

$colors: red, green, blue, yellow;

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

এখানে, @each লুপটি $colors অ্যারের উপর কাজ করছে এবং প্রতিটি রঙের জন্য একটি ক্লাস তৈরি করছে। ক্লাসের নামের মধ্যে #{$color} সিঙ্কট্যাক্স ব্যবহার করা হচ্ছে, যা প্রতিটি রঙের নাম ক্লাসের সাথে যুক্ত করছে।

আউটপুট:

.color-red {
  background-color: red;
  color: white;
}

.color-green {
  background-color: green;
  color: white;
}

.color-blue {
  background-color: blue;
  color: white;
}

.color-yellow {
  background-color: yellow;
  color: white;
}

এখানে, @each লুপটি $colors অ্যারের উপাদানগুলির জন্য ক্লাস তৈরি করেছে এবং প্রতিটি ক্লাসে সেই রঙের ব্যাকগ্রাউন্ড অ্যাসাইন করেছে।

৩. `@while` লুপ

@while লুপ ব্যবহার করে আপনি একটি নির্দিষ্ট শর্ত পূর্ণ না হওয়া পর্যন্ত কোড পুনরাবৃত্তি করতে পারেন। এটি একটি সাধারণ while loop এর মতো কাজ করে।

উদাহরণ:

ধরা যাক, আপনি কিছু সংখ্যক ক্লাস তৈরি করতে চান যেখানে সংখ্যা কিছু শর্ত পূর্ণ না হওয়া পর্যন্ত বৃদ্ধি পাবে:

$i: 1;

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

এখানে, @while লুপটি $i পরিবর্তনশীলের মান ১ থেকে ৫ পর্যন্ত বৃদ্ধি করে এবং প্রতিটি ক্লাসের জন্য সাইজ নির্ধারণ করছে।

আউটপুট:

.box-1 {
  width: 100px;
  height: 100px;
}

.box-2 {
  width: 200px;
  height: 200px;
}

.box-3 {
  width: 300px;
  height: 300px;
}

.box-4 {
  width: 400px;
  height: 400px;
}

.box-5 {
  width: 500px;
  height: 500px;
}

এখানে, @while লুপটি $i মানের উপর ভিত্তি করে ক্লাস তৈরি করছে এবং সেগুলির সাইজ সেট করছে।