Sass में @extend और Inheritance का उपयोग existing CSS rules को reuse करने के लिए किया जाता है। यह feature CSS को ज्यादा DRY यानी Don’t Repeat Yourself बनाने में मदद करता है। जब multiple selectors को same styles चाहिए होते हैं, तब @extend बहुत useful होता है।
इस chapter में हम Sass @extend और Inheritance को बिल्कुल beginner-level पर, step-by-step और बहुत simple भाषा में समझेंगे।
Inheritance क्या होती है
Inheritance का मतलब है एक selector का दूसरे selector की properties को inherit करना।
Sass में यह inheritance manually @extend keyword के जरिए की जाती है।
इसका purpose यह है कि common styles एक जगह define हों और बाकी selectors उन्हें reuse कर सकें।
@extend क्या होता है
@extend Sass का एक directive है, जिसकी मदद से एक selector किसी दूसरे selector की styles को share करता है।
जब कोई selector @extend करता है, तो Sass compiled CSS में selectors को intelligently merge कर देता है।
@extend Syntax
selector {
@extend another-selector;
}
यह syntax Sass compiler को बताता है कि selector, another-selector की styling को inherit करेगा।
Basic @extend Example
.message {
padding: 10px;
border: 1px solid #ccc;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
यह code .message नाम का base selector बनाता है, जिसमें common styles रखी गई हैं।
.success selector @extend .message का use करके .message की सारी styles inherit कर लेता है और अपनी extra style add करता है।
यह इसलिए use किया गया है ताकि common styles बार-बार न लिखनी पड़ें।
Compiled CSS output होगा:
.message,
.success {
padding: 10px;
border: 1px solid #ccc;
color: #333;
}
.success {
border-color: green;
}
यह output दिखाता है कि Sass ने selectors को combine कर दिया है।
@extend कैसे काम करता है
@extend actual CSS code copy नहीं करता, बल्कि selectors को merge करता है।
इसका मतलब:
- CSS file छोटी रहती है
- Duplicate properties नहीं बनतीं
- Browser performance बेहतर रहती है
Multiple Selectors के साथ @extend
.alert {
padding: 15px;
border-radius: 5px;
}
.warning {
@extend .alert;
background-color: yellow;
}
.error {
@extend .alert;
background-color: red;
}
यह code .alert को base selector बनाता है।
.warning और .error दोनों .alert की styles inherit करते हैं।
Compiled CSS output होगा:
.alert,
.warning,
.error {
padding: 15px;
border-radius: 5px;
}
.warning {
background-color: yellow;
}
.error {
background-color: red;
}
यह दिखाता है कि एक base class से multiple classes inherit कर सकती हैं।
Placeholder Selectors (%)
Sass में % placeholder selectors भी होते हैं, जिन्हें सिर्फ @extend के लिए use किया जाता है।
Placeholder selectors directly CSS में output नहीं होते।
Placeholder Selector Example
%box {
padding: 20px;
border: 1px solid #ddd;
}
यह %box एक placeholder selector है।
.card {
@extend %box;
}
यह code .card class को %box की styles inherit कराता है।
Compiled CSS output होगा:
.card {
padding: 20px;
border: 1px solid #ddd;
}
यह तरीका इसलिए use किया जाता है ताकि base styles CSS में extra selector के रूप में न आएं।
Placeholder Selectors क्यों Use करें
- CSS clean रहती है
- Unused base classes output में नहीं आतीं
- Reusable base styles बनती हैं
Large projects में placeholder selectors best practice माने जाते हैं।
@extend और @mixin में Difference
@extend:
- Selectors को merge करता है
- CSS output smaller होता है
- Inheritance-based approach है
@mixin:
- Code copy करता है
- CSS output बड़ा हो सकता है
- Parameter support करता है
Simple shared styles के लिए @extend बेहतर होता है।
Dynamic या parameter-based styles के लिए @mixin बेहतर होता है।
@extend कब Use करें
@extend का use करें जब:
- Styles logically related हों
- Same base styling multiple selectors में चाहिए
- CSS output size कम रखना हो
@extend में सावधानी
@extend selectors को globally affect कर सकता है।
इसलिए:
- Generic selectors जैसे
div,pको extend न करें - Mostly classes या placeholders extend करें
- Structure को simple रखें
Beginner के लिए Important Points
- Common styles को base selector में रखें
- Reusable structure के लिए placeholder selectors use करें
@extendको limited और logical रखें
Sass में @extend और Inheritance CSS को efficient, reusable और professional बनाते हैं और large-scale styling को manage करना आसान कर देते हैं।