SASS-এ উত্তরাধিকার

এই নিবন্ধটি SASS-এ উত্তরাধিকার ব্যাখ্যা করে।

আমরা SASS-এ উত্তরাধিকার ব্যবহারিক উদাহরণের মাধ্যমে ব্যাখ্যা করবো।

YouTube Video

SASS-এ উত্তরাধিকার

SASS-এ উত্তরাধিকার (@extend) এমন একটি পদ্ধতি, যা আপনাকে এক সিলেক্টরের স্টাইল অন্য সিলেক্টরে পুনরাবৃত্তি ছাড়াই প্রয়োগ করার সুযোগ দেয়। একই স্টাইল একাধিক এলিমেন্টে 'মিলিত' হয়ে আউটপুট হয় বলে CSS কম পুনরাবৃত্তি হয়; তবে, ভুলভাবে ব্যবহার করলে অনাকাঙ্ক্ষিত সিলেক্টর মার্জ হতে পারে।

@extend ব্যবহারের মূলনীতি

নিচে একটি মৌলিক উদাহরণ দেয়া হলো, যেখানে .btn--primary শ্রেণিটি .btn-এর স্টাইল উত্তরাধিকারসূত্রে গ্রহণ করে। @extend একটি নির্দেশনা যা নির্দিষ্ট সিলেক্টরকে প্রসারিত করে।

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• @extend ব্যবহারের মাধ্যমে, .btn--primary তার মূল স্টাইলসমূহ .btn থেকে গ্রহণ করে এবং কেবল প্রয়োজনীয় অংশগুলি ওভাররাইড করে।

তৈরিকৃত CSS

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

সেরা পদ্ধতি: প্লেসহোল্ডার (%placeholder) ব্যবহার

প্লেসহোল্ডার সিলেক্টরগুলি (%name) হল এমন সিলেক্টর যা CSS-এ আউটপুট হয় না। এগুলি বিশেষভাবে ব্যবহৃত হয় যখন আপনি একাধিক কম্পোনেন্ট জুড়ে শুধুমাত্র উত্তরাধিকারিত্বের জন্য সাধারণ স্টাইল নিরাপদে ভাগ করতে চান।

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• .card এবং .panel দুটিই %card-base থেকে উত্তরাধিকার স্বরূপ সাধারণ স্টাইল গ্রহণ করে, প্রয়োজনে পার্থক্য যোগ করতে পারে।

তৈরিকৃত CSS

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

একাধিক উত্তরাধিকার (একাধিক @extend)

আপনি একসাথে একাধিক প্লেসহোল্ডার বা ক্লাস উত্তরাধিকারসূত্রে নিতে পারেন। যদিও স্টাইল পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়, তবে কোন নিয়ম কোন সিলেক্টরের সাথে যুক্ত হচ্ছে তা পরিষ্কারভাবে মনে রাখা গুরুত্বপূর্ণ।

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• এখানে একটি উদাহরণ দেয়া হয়েছে, যেখানে একটি বোতাম দুইটি প্লেসহোল্ডার উত্তরাধিকারসূত্রে পায়—একটা 'base' ও একটা 'size' এর জন্য।
• .btn--lg একসাথে %btn-base এবং %btn-large উত্তরাধিকারসূত্রে গ্রহণ করে, যার ফলে মৌলিক বিন্যাস ও বড় আকার একত্রিত হয়।

তৈরিকৃত CSS

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

@extend-এর আচরণ (মার্জ করার নিয়ম) এবং 'সিলেক্টর বিস্ফোরণ'-এর সতর্কতা

@extend মিল থাকা সকল সিলেক্টরকে একত্রিত করে আউটপুট দেয়, যা কখনও কখনও অনাকাঙ্ক্ষিত সিলেক্টর সংমিশ্রণ ঘটাতে পারে।

নিম্নোক্ত উদাহরণে দেখানো হয়েছে কিভাবে একই বেস ক্লাস একাধিক স্থানে এক্সটেন্ড করলে আউটপুট বেড়ে যেতে পারে।

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• যখন একাধিক কম্পোনেন্ট .utility উত্তরাধিকারসূত্রে গ্রহণ করে, তখন সব সিলেক্টর একত্রিত হয় এবং বড় প্রকল্পে CSS অপ্রয়োজনীয়ভাবে দীর্ঘ হয়ে যেতে পারে।

তৈরিকৃত CSS

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend এবং .class বনাম এলিমেন্ট সিলেক্টর (ট্যাগ) — অগ্রাধিকার ও পার্শ্বপ্রতিক্রিয়া

@extend শুধুমাত্র ক্লাসের জন্য নয়, এলিমেন্ট সিলেক্টরের জন্যও প্রযোজ্য হতে পারে। তবে, এলিমেন্টে এক্সটেন্ড করলে প্রভাবিত ক্ষেত্র বাড়ে, ফলে গাইডলেসভাবে কোনো নিয়ম অনিচ্ছাকৃত স্থানে প্রয়োগ হওয়ার ঝুঁকি বেড়ে যায়।

নিচে একটি এলিমেন্ট সিলেক্টর এক্সটেন্ড করার উদাহরণ এবং এর প্রভাব দেখানো হয়েছে।

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• এই উদাহরণে, h1 এলিমেন্ট সিলেক্টর উত্তরাধিকারসূত্রে নিলে .title ও h1 একই স্টাইল পেয়ে যায়।
• ছোট পরিসরে এটি সুবিধাজনক মনে হলেও, প্রজেক্ট বড় হলে h1-এর নিয়ম আকস্মিকভাবে .title-এর সঙ্গে মিশে যেতে পারে, ফলে স্টাইল আরও জটিল হয় এবং রক্ষণাবেক্ষণযোগ্যতা কমে যায়। তাই, ক্লাস এবং প্লেসহোল্ডার ভিত্তিক স্টাইল ডিজাইন করলে তা রক্ষণাবেক্ষণের জন্য সহজ হয়।

তৈরিকৃত CSS

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

@extend এবং !optional-এর ব্যবহার

যদি আপনি @extend-এর সাথে !optional নির্ধারণ করেন, তবে ইনহেরিটেন্সের লক্ষ্য উপস্থিত না থাকলে ত্রুটি দমন করতে পারেন। এটি লাইব্রেরি-ধরনের কোড অথবা যেখানে প্লেসহোল্ডার শর্তসাপেক্ষে সংজ্ঞায়িত হয়, সেই ক্ষেত্রে বিশেষভাবে উপযোগী।

নিম্নের উদাহরণে !optional ব্যবহার করে অনুপস্থিত ক্লাস নিরাপদভাবে উত্তরাধিকার নেওয়া দেখানো হয়েছে।

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• যদি .maybe-existing না থাকে, তাহলে কিছুই হয় না এবং এটি উপেক্ষা করা হয়। আপনি নিরাপদে এক্সটেন্ড চেষ্টা করতে চাইলে এটা ব্যবহার করতে পারেন।

তৈরিকৃত CSS

1.component {
2  padding: 1rem;
3}

@extend এবং মিক্সিন (@mixin / @include) তুলনা

@extend এবং @mixin কখনো কখনো একই উদ্দেশ্যে ব্যবহৃত হয়, তবে তাদের আউটপুট ও ব্যবহার পদ্ধতি আলাদা।

• @extend

  • তৈরিকৃত CSS সিলেক্টর মার্জ করে পুনরাবৃত্তি কমায়।
  • কারণ সিলেক্টরসমূহ বানানোর পর মার্জ হয়, তাই অনাকাঙ্ক্ষিত মিশ্রণ ঘটতে পারে।
  • প্যারামিটার পাঠানো যায় না (তবে প্লেসহোল্ডার একত্রিত করে কিছুটা সমাধান করা যায়)।

• @mixin / @include

  • প্রত্যেকবার ব্যবহারে স্টাইল ডুপ্লিকেট হয় (ফলে অতিরিক্ত আউটপুট হয়)।
  • এতে প্যারামিটার পাঠানো যায় এবং শর্ত বা লুপের মতো লজিক যুক্ত করা যায়।
  • আউটপুট আগেভাগে অনুমান করা যায়, তবে ফাইলের আকার বেড়ে যায়।

নিচে একই বোতাম স্টাইল করতে @mixin এবং @extend-এর তুলনামূলক ব্যবহার দেখানো হয়েছে।

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• @mixin আপনাকে নমনীয়ভাবে স্টাইল ইনসার্ট করতে দেয়, আর @extend আউটপুটকে দক্ষভাবে মিলিত করে, তাই ব্যবহারভেদে উপযুক্তটিই বেছে নিন।

তৈরিকৃত CSS

@mixin থেকে আউটপুট

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

@extend থেকে আউটপুট

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

প্রায়োগিক নির্দেশনা

SASS ইনহেরিটেন্স স্টাইলের পুনঃব্যবহারযোগ্যতা বাড়ানোর জন্য একটি শক্তিশালী ফিচার। তবে, ভুলভাবে ব্যবহার করলে স্টাইল মার্জ জটিল হয়ে ওঠে এবং রক্ষণাবেক্ষণ কমে যায়। নিম্নে ইনহেরিটেন্স নিরাপদ ও কার্যকরভাবে ব্যবহারের জন্য কিছু মূল পয়েন্ট দেওয়া হলো।

• কেবলমাত্র সাধারণ কম্পোনেন্টের স্টাইল (যেমন: গঠন ও লেআউট) এর জন্য প্লেসহোল্ডার ব্যবহার করুন। অতিরিক্তভাবে, যদি ডাইনামিক প্যারামিটারাইজেশন দরকার হয়, আপনি @mixin ব্যবহার করতে পারেন।
• আপনাকে h1-এর মতো HTML এলিমেন্ট ডাইরেক্টলি ইনহেরিট করা এড়ানো উচিত। অনিচ্ছাকৃত সিলেক্টর সংমিশ্রণ ঘটতে পারে, যার ফলে অপ্রত্যাশিত CSS তৈরি হতে পারে।
• BEM-এর মতো নামকরণের রীতি বা স্পষ্ট প্রিফিক্স ব্যবহার করে প্লেসহোল্ডারের উদ্দেশ্য জানালে নিরাপত্তা বাড়ে।
• @extend একই ফাইলের মধ্যে ব্যবহার করাই নিরাপদ। বিশেষ করে বড় প্রজেক্টে, প্রতিটি কম্পোনেন্টের ভেতরেই ইনহেরিটেন্স ডিজাইন করা উচিৎ, যাতে ইনহেরিটেন্স সম্পর্ক সহজে ট্র্যাক করা যায়।

সারসংক্ষেপ

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

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video