Complex Mixin এবং Function তৈরি করা

Sass কি?

Sass (Syntactically Awesome Stylesheets) একটি CSS প্রিপ্রসেসর যা CSS-কে আরও শক্তিশালী, কার্যকর এবং পুনঃব্যবহারযোগ্য করে তোলে। এটি অনেক উন্নত ফিচার প্রদান করে যেমন Variables, Nesting, Partials, Mixins, Inheritance, এবং Functions যা CSS এর মৌলিক কাঠামোকে প্রসারিত করে।

এখানে আমরা Complex Mixin এবং Function তৈরি করার পদ্ধতি নিয়ে আলোচনা করব। Sass-এ Mixin এবং Function এর সাহায্যে আপনার কোড আরও পুনঃব্যবহারযোগ্য, পরিষ্কার এবং সহজে কাস্টমাইজযোগ্য করা যায়।

১. Sass Mixin তৈরি করা

Mixin হল একটি ব্লক কোড যা বারবার ব্যবহার করা যায়। এটি CSS প্রপার্টি এবং রুল সেটগুলো একটি ফাংশনের মতো সংরক্ষণ করে, যেগুলো পরে পুনরায় ব্যবহার করা যায়। মিক্সিনের মাধ্যমে আপনি একাধিক CSS স্টাইল একসাথে গ্রুপ করতে পারেন এবং প্যারামিটার সহ ব্যবহার করতে পারেন।

Complex Mixin উদাহরণ:

ধরা যাক, আপনি একটি কমপ্লেক্স button মিক্সিন তৈরি করতে চান যা ব্যাকগ্রাউন্ড কালার, ফন্ট সাইজ, এবং মার্জিন প্রপার্টি নেয়।

// button mixin
@mixin button($bg-color, $font-size: 16px, $margin: 10px) {
  background-color: $bg-color;
  font-size: $font-size;
  margin: $margin;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  border: none;
  cursor: pointer;
  
  &:hover {
    opacity: 0.8;
  }
}

// ব্যবহার:
.button-primary {
  @include button(#007bff, 18px, 15px);
}

.button-secondary {
  @include button(#6c757d);
}

ব্যাখ্যা:

• $bg-color, $font-size, এবং $margin হল প্যারামিটার।
• $font-size এবং $margin এর জন্য ডিফল্ট মান দেওয়া আছে, যাতে এগুলো না দিলেও মিক্সিনটি কাজ করবে।
• আপনি যখন @include ব্যবহার করবেন, তখন এগুলো প্যারামিটার হিসেবে পাস করতে হবে।

এই মিক্সিনটি কোডে বিভিন্ন স্থানে একাধিক বাটন স্টাইল তৈরি করতে ব্যবহৃত হবে।

২. Sass Function তৈরি করা

Function হল একটি কোড ব্লক যা কোন নির্দিষ্ট ইনপুট নিয়ে একটি মান রিটার্ন করে। এটি সাধারণত গণনা বা কোন নির্দিষ্ট লজিক সম্পাদন করতে ব্যবহৃত হয়। Sass ফাংশনগুলো আপনাকে মান ফেরত দিতে সক্ষম করে, যা পরবর্তীতে কোডে ব্যবহার করা যায়।

Complex Function উদাহরণ:

ধরা যাক, আপনি একটি color manipulation function তৈরি করতে চান যা একটি বেস কালারকে একটি নির্দিষ্ট পরিমাণে হালকা বা গা dark ় করে।

// Lighten or darken a color function
@function adjust-color($color, $amount: 10%) {
  @if $amount > 0 {
    @return lighten($color, $amount);
  } @else {
    @return darken($color, abs($amount));
  }
}

// ব্যবহার:
$primary-color: #007bff;
$light-color: adjust-color($primary-color, 20%); // হালকা
$dark-color: adjust-color($primary-color, -20%); // গা dark ়

div {
  background-color: $light-color;
}

p {
  color: $dark-color;
}

ব্যাখ্যা:

• adjust-color ফাংশন দুটি পরামিটার নেয়: একটি $color এবং একটি $amount যা কতটা হালকা বা গা dark ় করতে হবে তা নির্ধারণ করে।
• যদি $amount পজিটিভ হয়, তবে এটি lighten() ফাংশন ব্যবহার করবে, আর যদি নেগেটিভ হয়, তবে darken() ফাংশন ব্যবহার করবে।

এই ফাংশনটি ব্যবহার করে আপনি নির্দিষ্ট রঙের সাথে হালকা বা গা dark ় এফেক্ট যোগ করতে পারবেন।

৩. Mixin এবং Function এর মধ্যে পার্থক্য

৪. Mixin এবং Function এর বাস্তব জীবনে ব্যবহার

Mixin উদাহরণ:

@mixin card($bg-color, $padding: 20px) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-primary {
  @include card(#007bff);
}

.card-secondary {
  @include card(#6c757d, 25px);
}

এখানে, card মিক্সিনটি একাধিক কার্ড কম্পোনেন্টে ব্যবহার করা যেতে পারে। এতে দুটি প্যারামিটার: $bg-color এবং $padding ব্যবহার করা হয়েছে, যেখানে $padding একটি ডিফল্ট মান রয়েছে।

Function উদাহরণ:

@function calculate-spacing($value) {
  @return $value * 10px;
}

$spacing: calculate-spacing(5); // 50px
div {
  margin: $spacing;
}

এখানে, calculate-spacing ফাংশনটি একটি সংখ্যা নিয়ে তা ১০px গুণ করে রিটার্ন করে।

সারাংশ

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