Inheritance এর মাধ্যমে কোড রিইউজ করা (@extend এবং %placeholder)

Sass (Syntactically Awesome Stylesheets) এর পরিচিতি

Sass একটি CSS প্রিপ্রসেসর, যা CSS এর উপর অতিরিক্ত ফিচার প্রদান করে এবং CSS কোড লেখাকে আরও দক্ষ, শক্তিশালী, এবং পরিচালনাযোগ্য করে তোলে। Sass আপনাকে variables, mixins, functions, nesting, inheritance ইত্যাদি ব্যবহার করতে দেয়, যার মাধ্যমে CSS কোড আরও পরিষ্কার এবং রিইউজেবল হয়।

এখানে আমরা Inheritance (অর্থাৎ, কোড পুনরায় ব্যবহার) সম্পর্কে আলোচনা করব, যেখানে @extend এবং %placeholder এর মাধ্যমে কোড রিইউজ করা হয়।

Inheritance in Sass: @extend এবং %placeholder

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

Sass-এ Inheritance মূলত @extend এবং %placeholder এর মাধ্যমে ব্যবহৃত হয়। এই দুটি টুলের মাধ্যমে আপনি একটি স্টাইলশীট থেকে আরেকটি স্টাইলশীটে স্টাইল এক্সটেন্ড করতে পারেন, যার ফলে একই রকম স্টাইল একাধিক সেলেক্টরের জন্য পুনরায় ব্যবহার করা যায়।

১. @extend ডিরেকটিভ

@extend ডিরেকটিভটি একটি সেলেক্টরের স্টাইল অন্য একটি সেলেক্টরে প্রয়োগ করতে ব্যবহৃত হয়। এটি সেই স্টাইলের সমস্ত প্রপার্টি এক্সটেন্ড করে, যার ফলে কোড ছোট এবং পুনরায় ব্যবহারযোগ্য হয়।

উদাহরণ:

// Base class with shared styles
.button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
}

// Extending the base class
.btn-primary {
  @extend .button;
  font-weight: bold;
}

.btn-secondary {
  @extend .button;
  background-color: #555;
}

এখানে, .btn-primary এবং .btn-secondary ক্লাসগুলি .button ক্লাসের স্টাইলগুলি এক্সটেন্ড করছে। এর ফলে, .btn-primary এবং .btn-secondary এর মধ্যে অতিরিক্ত font-weight এবং background-color স্টাইল যোগ করা হয়েছে, কিন্তু তারা .button ক্লাসের স্টাইলও ব্যবহার করছে।

CSS আউটপুট:

.button, .btn-primary, .btn-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
}

.btn-primary {
  font-weight: bold;
}

.btn-secondary {
  background-color: #555;
}

এখানে, @extend ডিরেকটিভের মাধ্যমে .btn-primary এবং .btn-secondary ক্লাসগুলি .button এর স্টাইল গ্রহণ করেছে, এবং অতিরিক্ত কাস্টম স্টাইল যুক্ত করেছে।

২. %placeholder এর মাধ্যমে Inheritance

%placeholder হলো একটি বিশেষ ধরনের সেলেক্টর, যা কখনোই নিজে থেকে CSS আউটপুট তৈরি করবে না, কিন্তু আপনি যদি এটি @extend এর মাধ্যমে ব্যবহার করেন, তবে এটি অন্য সেলেক্টরের মধ্যে স্টাইল এক্সটেন্ড করবে। এটি "invisible class" হিসেবে কাজ করে এবং কেবলমাত্র @extend এর মাধ্যমে ব্যবহৃত হয়।

উদাহরণ:

// Placeholder class with common styles
%button-styles {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
}

// Extending the placeholder class
.btn-primary {
  @extend %button-styles;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-styles;
  background-color: #555;
}

এখানে, %button-styles একটি প্লেসহোল্ডার ক্লাস, যা স্টাইল ধারণ করে। তবে এটি কোনো CSS আউটপুট তৈরি করে না। শুধুমাত্র .btn-primary এবং .btn-secondary ক্লাসগুলো @extend %button-styles দিয়ে এটি এক্সটেন্ড করছে।

CSS আউটপুট:

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
}

.btn-primary {
  font-weight: bold;
}

.btn-secondary {
  background-color: #555;
}

এখানে, %button-styles প্লেসহোল্ডার স্টাইলটি .btn-primary এবং .btn-secondary ক্লাসে এক্সটেন্ড করা হয়েছে, কিন্তু এটি সরাসরি CSS আউটপুটে প্রতিফলিত হয়নি।

@extend এবং %placeholder এর মধ্যে পার্থক্য

উপসংহার

Sass-এর Inheritance ফিচার (যেমন @extend এবং %placeholder) ব্যবহার করে আপনি কোড রিইউজ করতে পারেন এবং আপনার CSS কোডকে আরও সংক্ষিপ্ত এবং পরিষ্কার করতে পারেন। @extend সরাসরি ক্লাসের স্টাইল এক্সটেন্ড করে এবং %placeholder কেবলমাত্র প্লেসহোল্ডার ক্লাস হিসেবে কাজ করে, যা সরাসরি CSS আউটপুটে দেখা যায় না, তবে তা স্টাইল শেয়ার করতে ব্যবহৃত হয়। এই দুটি টুলের মাধ্যমে আপনি কোডের রিডেবিলিটি এবং পুনরায় ব্যবহারযোগ্যতা বৃদ্ধি করতে পারেন, যা ওয়েব ডেভেলপমেন্টে কার্যকরী এবং উন্নত কাজের জন্য সহায়তা করে।