Sass में @mixin और @include का उपयोग reusable CSS code बनाने के लिए किया जाता है। जब हमें एक ही type की styling बार-बार अलग-अलग जगह लिखनी पड़ती है, तब mixins बहुत useful होते हैं। Mixins की मदद से हम duplicate code से बच सकते हैं और CSS को ज्यादा clean और maintainable बना सकते हैं।
इस chapter में हम Sass @mixin और @include को बिल्कुल beginner-level पर, step-by-step और बहुत simple भाषा में समझेंगे।
@mixin क्या होता है
@mixin Sass का एक feature है, जिसकी मदद से हम CSS properties का एक group बना सकते हैं। इस group को बाद में कहीं भी reuse किया जा सकता है।
Mixins function की तरह काम करते हैं, लेकिन ये CSS code return करते हैं।
@mixin Syntax
@mixin mixin-name {
property: value;
}
यह syntax Sass compiler को बताता है कि mixin-name नाम का एक reusable block बनाया जा रहा है।
इस mixin के अंदर जो भी CSS लिखा जाएगा, वह @include के जरिए apply किया जा सकता है।
Simple @mixin Example
@mixin rounded-box {
border-radius: 10px;
padding: 20px;
}
यह code rounded-box नाम का mixin बनाता है।
इस mixin का use इसलिए किया गया है ताकि border-radius और padding की same styling बार-बार न लिखनी पड़े।
@include क्या होता है
@include का उपयोग किसी mixin को apply करने के लिए किया जाता है।
@include Syntax
@include mixin-name;
यह syntax Sass को बताता है कि दिए गए mixin का code यहां insert कर दिया जाए।
@mixin और @include का Basic Example
@mixin rounded-box {
border-radius: 10px;
padding: 20px;
}
.card {
@include rounded-box;
}
यह code .card class में rounded-box mixin को apply करता है।
इसका result यह होता है कि .card element को वही styles मिल जाते हैं जो mixin में define किए गए हैं।
Compiled CSS output होगा:
.card {
border-radius: 10px;
padding: 20px;
}
यह दिखाता है कि Sass ने mixin के code को include करके normal CSS generate कर दी।
@mixin क्यों Use करें
Mixins use करने के फायदे:
- Reusable CSS code
- Duplicate code से बचाव
- Consistent styling
- Easy maintenance
Large projects में mixins बहुत time save करते हैं।
@mixin के साथ Parameters
Mixins में parameters भी pass किए जा सकते हैं, जिससे mixin ज्यादा flexible बन जाता है।
Parameterized @mixin Syntax
@mixin mixin-name($parameter) {
property: $parameter;
}
यह syntax mixin को dynamic बनाता है।
Parameterized @mixin Example
@mixin text-style($color, $size) {
color: $color;
font-size: $size;
}
यह mixin text color और font size को parameters के रूप में accept करता है।
@include के साथ Arguments
p {
@include text-style(red, 16px);
}
यह code text-style mixin को call करता है और red और 16px values pass करता है।
Compiled CSS output होगा:
p {
color: red;
font-size: 16px;
}
यह output दिखाता है कि mixin parameters actual CSS values से replace हो गए हैं।
Default Parameter Values
Mixins में default values भी define की जा सकती हैं।
Example
@mixin box($padding: 10px) {
padding: $padding;
}
यह mixin default रूप से 10px padding use करता है।
@include बिना Value दिए
.card {
@include box;
}
यह code default padding apply करेगा।
CSS output होगा:
.card {
padding: 10px;
}
@include के साथ Custom Value
.alert {
@include box(20px);
}
यह code default value को override करता है।
CSS output होगा:
.alert {
padding: 20px;
}
@mixin में Multiple Properties Example
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
यह mixin flexbox का common pattern define करता है।
.header {
@include flex-center;
}
इसका result होगा:
.header {
display: flex;
justify-content: center;
align-items: center;
}
यह approach layout code को बहुत simple बना देती है।
@mixin vs Nested Rules
Mixins code reuse के लिए होते हैं, जबकि nesting structure दिखाने के लिए।
दोनों का purpose अलग है और सही जगह पर use करना चाहिए।
@mixin और @include का Best Use Case
Mixins का use करें जब:
- Same styles multiple selectors में apply हों
- Vendor prefixes manage करने हों
- Layout patterns repeat हो रहे हों
Mixins beginner से लेकर advanced developers तक सभी के लिए बहुत powerful tool हैं।
Sass में @mixin और @include CSS development को fast, reusable और professional बना देते हैं।