Reusable CSS কোড তৈরি করা এবং ডায়নামিক প্যারামিটার ব্যবহার করা

সাস (Sass) কি?

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রোসেসর যা CSS কোড লিখতে আরও শক্তিশালী, দ্রুত, এবং পুনঃব্যবহারযোগ্য পদ্ধতি প্রদান করে। এটি CSS এর ওপর উন্নত ফিচার এবং ফাংশনালিটি প্রদান করে, যেমন Variables, Nesting, Mixins, Inheritance, এবং Partials। Sass ব্যবহার করার মাধ্যমে আপনি CSS কোডে পুনঃব্যবহারযোগ্য এবং মডুলার স্টাইল লিখতে পারবেন, যা পরবর্তীতে রক্ষণাবেক্ষণ এবং স্কেলেবিলিটি সহজ করবে।

এখানে আমরা দেখব কীভাবে Reusable CSS কোড তৈরি করা যায় এবং Dynamic Parameters ব্যবহার করা যায়।

Reusable CSS কোড তৈরি করা

Sass এ reusable CSS code তৈরি করার জন্য প্রধানত Variables, Mixins, এবং Inheritance ব্যবহৃত হয়। এই ফিচারগুলির মাধ্যমে আপনি একাধিক স্থানে একই কোড ব্যবহার করতে পারেন, যা কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি করে।

১. Variables (ভেরিয়েবলস)

Sass-এ আপনি Variables ব্যবহার করে রঙ, ফন্ট সাইজ, মার্জিন, প্যাডিং ইত্যাদি মানগুলোকে সংজ্ঞায়িত করতে পারেন এবং সেগুলির মান পুরো প্রোজেক্টে একাধিক স্থানে ব্যবহার করতে পারেন।

উদাহরণ:

// Variable Declaration
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;

// Reusing Variables
body {
  font-size: $font-size;
  color: $primary-color;
}

button {
  background-color: $secondary-color;
  color: white;
}

এখানে, $primary-color, $secondary-color, এবং $font-size ভেরিয়েবলস হিসেবে সংজ্ঞায়িত হয়েছে এবং এগুলো বিভিন্ন সিএসএস প্রোপার্টিতে পুনঃব্যবহৃত হয়েছে।

২. Mixins (মিক্সিনস)

Mixins হল এমন ফাংশন যা CSS কোডের ব্লক সংজ্ঞায়িত করে এবং পরে সেই কোড অন্য কোথাও ব্যবহার করা যায়। মিক্সিনে প্যারামিটারও দেওয়া যেতে পারে, যা কোডকে আরও ডায়নামিক এবং কাস্টমাইজেবল করে।

উদাহরণ:

// Mixin Declaration
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// Reusing Mixin
.box {
  @include border-radius(10px);
}

.circle {
  @include border-radius(50%);
}

এখানে, border-radius মিক্সিনটি একটি প্যারামিটার গ্রহণ করে এবং সেই প্যারামিটার ব্যবহার করে রাউন্ডেড কনners তৈরি করছে। @include দিয়ে মিক্সিনটি প্রয়োগ করা হচ্ছে।

৩. Extend/Inherit (এক্সটেন্ড/ইনহেরিট)

Sass-এ আপনি Extend বা @extend ব্যবহার করে CSS ক্লাসের মধ্যে সাধারণ স্টাইলগুলিকে ভাগ করে নিতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা বাড়ায় এবং একই ধরনের স্টাইল একাধিক ক্লাসে ব্যবহারের ক্ষেত্রে সহায়ক হয়।

উদাহরণ:

// Base Class
.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

// Extending the Base Class
.primary-button {
  @extend .button;
  background-color: blue;
  color: white;
}

.secondary-button {
  @extend .button;
  background-color: grey;
  color: black;
}

এখানে, .primary-button এবং .secondary-button ক্লাস দুটি .button ক্লাসের স্টাইলগুলিকে extend করছে এবং নিজেদের জন্য আলাদা ব্যাকগ্রাউন্ড এবং রঙ নির্ধারণ করছে।

ডায়নামিক প্যারামিটার ব্যবহার করা

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

১. Dynamic Values with Functions (ফাংশনের মাধ্যমে ডায়নামিক মান)

Sass-এ ফাংশন ব্যবহার করে আপনি ডায়নামিক মান গণনা বা তৈরি করতে পারেন।

উদাহরণ:

// Function Declaration
@function calculate-spacing($size) {
  @return $size * 2;
}

// Using Function
.container {
  margin-top: calculate-spacing(10px); // Returns 20px
  margin-bottom: calculate-spacing(15px); // Returns 30px
}

এখানে, calculate-spacing ফাংশনটি প্যারামিটার হিসেবে প্রাপ্ত মানকে গুণ করে একটি নতুন মান প্রদান করছে। এর মাধ্যমে ডায়নামিক স্টাইলস তৈরি করা হয়েছে।

২. Dynamic Mixins with Parameters (প্যারামিটার সহ ডায়নামিক মিক্সিন)

Mixins-এ প্যারামিটার ব্যবহার করে, আপনি একাধিক ভিন্ন ভিন্ন স্টাইল গঠন করতে পারেন, যা সেই প্যারামিটারগুলির ওপর নির্ভরশীল।

উদাহরণ:

// Mixin Declaration with Parameters
@mixin font-size($size, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

// Reusing Mixin with Dynamic Parameters
h1 {
  @include font-size(32px, bold);
}

p {
  @include font-size(16px);
}

এখানে, font-size মিক্সিনটি দুটি প্যারামিটার নেয়: $size এবং $weight। $weight এর জন্য একটি ডিফল্ট মান normal দেয়া হয়েছে, তবে আপনি এটি প্রয়োজনে পরিবর্তন করতে পারেন।

সারাংশ

Sass একটি শক্তিশালী টুল যা আপনাকে CSS কোডে পুনঃব্যবহারযোগ্যতা, ডায়নামিক প্যারামিটার ব্যবহার এবং কোডের মডুলারিটি বজায় রাখার সুযোগ দেয়। Variables, Mixins, এবং Extend এর মাধ্যমে আপনি সহজে পুনঃব্যবহারযোগ্য এবং কাস্টমাইজেবল CSS কোড তৈরি করতে পারেন, যা কোডের রক্ষণাবেক্ষণ এবং স্কেলেবিলিটি বাড়ায়। Dynamic Parameters এবং Functions এর মাধ্যমে Sass আরও শক্তিশালী এবং ডায়নামিক স্টাইলস তৈরি করতে সাহায্য করে।