CSS Preprocessors

एक लंबी book लिखने की कल्पना करें। अगर आप इसे किसी पुराने typewriter पर लिखते हैं, तो आपको हर page हाथ से type करना पड़ता है। अगर आप कोई spelling error करते हैं या बाद में किसी character का नाम बदलना चाहते हैं, तो आपको उन sections को हाथ से search करके फिर से type करना पड़ता है। अब, अपने computer पर एक smart word processor इस्तेमाल करने की कल्पना करें। आप copy-paste, find-and-replace, variables, और automated chapters इस्तेमाल कर सकते हैं। यह कहीं ज़्यादा तेज़ और साफ़ है। CSS preprocessors (जैसे Sass) वही smart word processors हैं। ये CSS को programming-जैसी features (जैसे variables, nested selectors, और reusable code blocks) के साथ extend करते हैं, उन्हें standard CSS में compile करते हुए जिसे browsers पढ़ सकें।

In this page:

Preprocessors बनाम Native CSS
Preprocessor Nesting
Preprocessor Mixins
Preprocessor Variables
Preprocessor File Imports

Preprocessors बनाम Native CSS

CSS Preprocessors (जैसे Sass, Less, या Stylus) scripting languages हैं जो CSS को nesting, variables, और mixins जैसी advanced features के साथ extend करती हैं। आप अपना code preprocessor syntax में लिखते हैं, जिसे standard CSS में compile किया जाता है जिसे browsers पढ़ सकें।

Note: अपने preprocessor files को automatically compile करने के लिए अपने project editor के अंदर एक compiler (जैसे Dart Sass) इस्तेमाल करें।

Warning: Browsers preprocessor files को सीधे नहीं पढ़ सकते; उन्हें हमेशा standard .css files में compile किया जाना चाहिए।

उदाहरण: Preprocessors vs. Native CSS

css

<!-- SCSS source (needs a preprocessor):
$color: teal;
p {
  color: $color;
}
-->
<style>
p { color: teal; }
</style>
<p>Compiled output: teal text</p>

Preprocessor Nesting

Preprocessors आपको अपने CSS selectors को एक-दूसरे के अंदर nest करने देते हैं, आपके HTML tags की nesting structure से match करते हुए, आपके code को organized रखते हुए और repetitive selector paths कम करते हुए।

Note: bloated, overly specific CSS generate होने से रोकने के लिए अपनी nesting depth को तीन levels से कम रखें।

Warning: गहराई से nested selectors high specificity scores में result हो सकते हैं जो styles को override करना मुश्किल बना देते हैं।

उदाहरण: Preprocessor Nesting

css

<style>
.card .title { font-weight: bold; }
.card { border: 2px solid #1e6fd9; padding: 12px; width: 200px; }
.card {
  .title {
    font-weight: bold;
  }
}
</style>
<!-- Nested SCSS compiled to plain CSS below -->
<div class="card"><p class="title">Card title</p></div>

Preprocessor Mixins

Mixins CSS code के reusable blocks हैं जिन्हें आप एक बार define कर सकते हैं और दूसरे selectors के अंदर include कर सकते हैं, repetitive style rules रोकते हुए और अपनी stylesheets को DRY (Don't Repeat Yourself) रखते हुए।

Note: अलग-अलग sizes के buttons जैसे customizable styling blocks बनाने के लिए parameters वाले mixins इस्तेमाल करें।

Warning: भारी mixins का ज़्यादा इस्तेमाल आपकी compiled CSS file size को bloat कर सकता है, इसलिए इन्हें सावधानी से इस्तेमाल करें।

उदाहरण: Preprocessor Mixins

css

<!-- SCSS source (needs a preprocessor):
@mixin button($bg) {
  background: $bg;
  padding: 10px 20px;
}
.btn {
  @include button(royalblue);
}
-->
<style>
.btn { background: royalblue; padding: 10px 20px; border: 0; color: white; }
</style>
<button class="btn">Button</button>

Preprocessor Variables

Preprocessors CSS में variables introduce करने वाले पहले थे। Preprocessor variables static होते हैं; उन्हें compilation के दौरान उनकी actual values से replace कर दिया जाता है और native CSS variables की तरह browser के DOM के अंदर dynamically update नहीं किया जा सकता।

Note: static layout configurations के लिए preprocessor variables इस्तेमाल करें, और dark mode जैसे dynamic themes के लिए native CSS variables।

Warning: Preprocessor variables DOM के अंदर नहीं रहते, इसलिए आप उन्हें JavaScript इस्तेमाल करके पढ़ या modify नहीं कर सकते।

उदाहरण: Preprocessor Variables

css

<!-- SCSS source (needs a preprocessor):
$spacing: 16px;
.box {
  padding: $spacing;
}
-->
<style>
.box { padding: 16px; background: #cfe8ff; border: 2px solid #1e6fd9; }
</style>
<div class="box">Padding from a variable</div>

Preprocessor File Imports

Preprocessors आपको अपनी stylesheets को अलग, modular files (जैसे _buttons.scss या _theme.scss) में split करने और उन्हें @use या @import rules इस्तेमाल करके एक single, main stylesheet file में import करने देते हैं, आपके project को organized और maintain करने में आसान रखते हुए।

Note: compiler को यह बताने के लिए कि उन्हें अलग CSS files में compile न करें, अपनी partial file names को एक underscore से शुरू करें (जैसे _buttons.scss)।

Warning: Modern preprocessors variable namespace conflicts रोकने के लिए @import के बजाय @use इस्तेमाल करने की सलाह देते हैं।

उदाहरण: Preprocessor File Imports

css

<!-- SCSS source (needs a preprocessor):
@use 'buttons';
@use 'theme';
-->
<style>
.btn { background: royalblue; color: white; border: 0; padding: 10px 20px; }
</style>
<button class="btn">Styles from the imported files</button>

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Performance Next Lesson → CSS Frameworks Overview