List এবং Map এর মধ্যে লুপ এবং ফাংশন ব্যবহার করা

Sass (Syntactically Awesome Stylesheets) কি?

Sass (Syntactically Awesome Stylesheets) একটি প্রিসপ্রোসেসর যা CSS (Cascading Style Sheets) এর উপর ভিত্তি করে তৈরি হয়েছে এবং এর মাধ্যমে CSS কোড লেখা আরও কার্যকরী ও সংগঠিত করা সম্ভব হয়। Sass আপনাকে variables, nested rules, mixins, functions এবং loops এর মত শক্তিশালী বৈশিষ্ট্য প্রদান করে, যা CSS কোডকে আরও সহজ এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

List এবং Map হল Sass এর দুইটি গুরুত্বপূর্ণ ডেটা স্ট্রাকচার। List হল একটি অর্ডারড ডেটা স্ট্রাকচার, যেখানে আইটেমগুলো সিকোয়েন্স অনুযায়ী থাকে। Map হল একটি কাস্টম কীগুলির সাথে মানের সেট, যেখানে আপনি কীগুলির মাধ্যমে মান অ্যাক্সেস করতে পারেন।

এই গাইডে আমরা দেখব কীভাবে List এবং Map এর মধ্যে loops এবং functions ব্যবহার করা যায়, যাতে সাস কোড আরও কার্যকরী হয়।

১. List এর মধ্যে লুপ ব্যবহার করা

List হলো একটি অর্ডারড ডেটা স্ট্রাকচার যেখানে একাধিক মান রাখা হয়। Sass এ, আপনি @for অথবা @each লুপ ব্যবহার করে লিস্টের উপর অপারেশন করতে পারেন।

List এর মধ্যে লুপ উদাহরণ:

$colors: red, green, blue, yellow;

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

এখানে, @each লুপটি $colors লিস্টের প্রতিটি মানে একটি CSS ক্লাস তৈরি করবে, যার নাম হবে color-red, color-green, color-blue, এবং color-yellow, এবং প্রতিটি ক্লাসে সংশ্লিষ্ট রঙ সেট করা হবে।

আউটপুট:

.color-red {
  color: red;
}
.color-green {
  color: green;
}
.color-blue {
  color: blue;
}
.color-yellow {
  color: yellow;
}

এটি List এর মধ্যে লুপ ব্যবহার করে কাস্টম ক্লাস তৈরি করার একটি উদাহরণ।

২. Map এর মধ্যে লুপ ব্যবহার করা

Map হল একটি কাস্টম কীগুলির সাথে মানের সেট, যেখানে আপনি কীগুলির মাধ্যমে মান অ্যাক্সেস করতে পারেন। Sass এ @each লুপ ব্যবহার করে আপনি Map এর কীগুলোর উপর কাজ করতে পারেন।

Map এর মধ্যে লুপ উদাহরণ:

$font-sizes: (
  small: 12px,
  medium: 16px,
  large: 20px
);

@each $size, $value in $font-sizes {
  .text-#{$size} {
    font-size: $value;
  }
}

এখানে, $font-sizes একটি Map যা বিভিন্ন সাইজের জন্য মান ধারন করে। @each লুপের মাধ্যমে আমরা প্রতিটি সাইজের জন্য CSS ক্লাস তৈরি করেছি, যেমন text-small, text-medium, এবং text-large, এবং প্রতিটি ক্লাসে সংশ্লিষ্ট ফন্ট সাইজ সেট করেছি।

আউটপুট:

.text-small {
  font-size: 12px;
}
.text-medium {
  font-size: 16px;
}
.text-large {
  font-size: 20px;
}

এটি Map এর মধ্যে লুপ ব্যবহার করে কাস্টম CSS ক্লাস তৈরি করার একটি উদাহরণ।

৩. Functions এর মধ্যে লুপ ব্যবহার করা

Functions ব্যবহার করে আপনি কিছু কাস্টম অপারেশন বা গণনা করতে পারেন এবং সেই ফলাফলকে প্রোপারলি CSS কোডে ব্যবহার করতে পারেন। Sass এ, আপনি @each বা @for লুপের সাথে functions ব্যবহার করতে পারেন।

Function এর মধ্যে লুপ উদাহরণ:

$colors: red, green, blue, yellow;

@function generate-color-classes($colors) {
  $result: ();

  @each $color in $colors {
    $result: append($result, .color-#{$color} { color: $color; });
  }

  @return $result;
}

@include generate-color-classes($colors);

এখানে, generate-color-classes নামক একটি ফাংশন ব্যবহার করে লিস্টের প্রতিটি মানের জন্য CSS ক্লাস তৈরি করা হয়েছে। এই ফাংশনটি একটি সিএসএস স্টেটমেন্টের সংগ্রহ তৈরি করে এবং সেই স্টেটমেন্টগুলি ফেরত দেয়।

আউটপুট:

.color-red {
  color: red;
}
.color-green {
  color: green;
}
.color-blue {
  color: blue;
}
.color-yellow {
  color: yellow;
}

এটি Functions এর মধ্যে লুপ ব্যবহার করে একটি কাস্টম CSS কোড সিস্টেম তৈরি করার উদাহরণ।

৪. List এবং Map এর মধ্যে Conditional Logic ব্যবহার

Sass-এ, আপনি List এবং Map এর উপাদানগুলোর মধ্যে conditional logic প্রয়োগ করতে পারেন। এটি ডেটা প্রক্রিয়াকরণের সময় কিছু শর্ত নির্ধারণ করতে সাহায্য করে।

Conditional Logic উদাহরণ:

$colors: red, green, blue, yellow;
$primary-color: green;

@each $color in $colors {
  @if $color == $primary-color {
    .primary-color {
      background-color: $color;
    }
  } @else {
    .secondary-color {
      background-color: $color;
    }
  }
}

এখানে, @if শর্ত ব্যবহার করে আমরা যাচাই করেছি যে, যদি color মানটি primary-color এর সমান হয়, তবে .primary-color ক্লাসের ব্যাকগ্রাউন্ড সেট করা হবে, অন্যথায় .secondary-color ক্লাসে সেট করা হবে।

আউটপুট:

.primary-color {
  background-color: green;
}
.secondary-color {
  background-color: red;
}
.secondary-color {
  background-color: blue;
}
.secondary-color {
  background-color: yellow;
}

এটি List এবং Map এর মধ্যে conditional logic প্রয়োগ করার একটি উদাহরণ।

সারাংশ

Sass আপনাকে List এবং Map ডেটা স্ট্রাকচারের মধ্যে loops এবং functions ব্যবহারের মাধ্যমে শক্তিশালী স্টাইলসheets তৈরি করতে সাহায্য করে। List এবং Map এর মধ্যে @each, @for এবং @function ব্যবহার করে আপনি ডেটার উপর কার্যকরী অপারেশন করতে পারেন, যা CSS কোডের রিডেবিলিটি এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি করে। এছাড়া conditional logic এর মাধ্যমে আপনি ডেটার ওপর শর্ত নির্ধারণ করতে পারেন, যা কোডের ফ্লেক্সিবিলিটি আরও বাড়ায়।