Sass क्या है – Introduction in Hindi

What is Sass?

Sass एक CSS preprocessor है, जिसका मतलब यह है कि Sass CSS को और ज्यादा powerful बनाने के लिए extra features provide करता है। Sass में लिखे गए code को सीधे browser नहीं समझ सकता, इसलिए इसे पहले normal CSS में convert (compile) किया जाता है। इसके बाद वही CSS file browser में use होती है।

Sass आपको CSS से जुड़े कई advanced features देता है जैसे:

• Variables
• Nesting
• Mixins
• Inheritance
• Functions
• Control directives (conditions और loops)

इन features की वजह से CSS लिखना ज्यादा easy, readable, reusable और maintainable हो जाता है।

Sass को इस तरह design किया गया है कि अगर आपको CSS आती है, तो Sass सीखना आपके लिए मुश्किल नहीं होगा। Sass पूरी तरह CSS compatible है, यानी जो valid CSS है वह Sass file में भी valid रहती है।

What You Should Already Know

Sass सीखने से पहले आपको नीचे दी गई basic चीज़ों का knowledge होना चाहिए:

• HTML का basic structure
• CSS selectors
• CSS properties जैसे color, margin, padding, font-size
• CSS files को HTML में link करना

अगर आप basic CSS लिख और समझ सकते हैं, तो आप Sass आसानी से सीख सकते हैं। Sass में कोई भी ऐसा concept नहीं है जो CSS knowledge के बिना समझा जा सके।

Why Use Sass?

Normal CSS छोटे projects के लिए ठीक रहती है, लेकिन जैसे-जैसे project बड़ा होता जाता है, CSS को manage करना difficult हो जाता है। Sass इस problem को solve करता है।

Sass use करने के main reasons नीचे दिए गए हैं:

• Code Reusability
  Sass में variables, mixins और functions का use करके एक ही code को बार-बार reuse किया जा सकता है।
• Easy Maintenance
  अगर आपको पूरे project में color या font change करना है, तो Sass variables की मदद से सिर्फ एक जगह change करना होता है।
• Clean and Organized Code
  Nesting और partials की मदद से CSS files ज्यादा structured और readable बनती हैं।
• Faster Development
  Sass में कम code लिखकर ज्यादा काम किया जा सकता है, जिससे development speed बढ़ जाती है।
• Better for Large Projects
  Large websites और applications में Sass CSS को manage करना बहुत आसान बना देता है।

A Simple Example Why Sass is Useful

मान लीजिए आपकी website में हर जगह same primary color use हो रहा है।

Normal CSS Example

button {
  background-color: #3498db;
  color: white;
}

a {
  color: #3498db;
}

.header {
  border-bottom: 2px solid #3498db;
}

ऊपर दिए गए CSS code में एक ही color value बार-बार लिखी गई है। अगर future में आपको color change करना है, तो आपको हर जगह manually change करना पड़ेगा।

अब वही काम Sass के साथ:

Sass Example

$primary-color: #3498db;

button {
  background-color: $primary-color;
  color: white;
}

a {
  color: $primary-color;
}

.header {
  border-bottom: 2px solid $primary-color;
}

इस example में $primary-color एक variable है जिसमें color store किया गया है।
इस code का काम यह है कि पूरे stylesheet में जहां भी $primary-color लिखा है, वहां वही color apply होगा।

अगर future में color बदलना हो, तो सिर्फ variable की value change करनी होगी और पूरी CSS automatically update हो जाएगी। यही Sass की सबसे बड़ी power है।

How Does Sass Work?

Sass directly browser में run नहीं होता। Sass का working process नीचे दिए गए steps में समझा जा सकता है:

1. Developer .scss या .sass file में code लिखता है
2. Sass compiler उस file को read करता है
3. Sass compiler Sass code को normal .css file में convert करता है
4. Browser उस generated CSS file को load करता है

इसका मतलब यह है कि end user को कभी भी Sass code नहीं मिलता, उसे सिर्फ standard CSS ही मिलती है।

Sass File Type

Sass में mainly दो types की files होती हैं:

1. .scss File (SCSS Syntax)

SCSS syntax सबसे ज्यादा popular है क्योंकि यह normal CSS जैसी ही दिखती है।

Example:

$font-size: 16px;

body {
  font-size: $font-size;
  color: #333;
}

इस example में SCSS syntax use किया गया है।
इस code का काम यह है कि body element के लिए font-size और color set किया जाए, जहां font-size variable से लिया गया है।

2. .sass File (Indented Syntax)

Sass syntax में curly braces {} और semicolon ; नहीं होते। इसमें indentation का use किया जाता है।

Example:

$font-size: 16px

body
  font-size: $font-size
  color: #333

इस code का output same CSS देगा, लेकिन writing style अलग है। Beginners के लिए SCSS syntax ज्यादा easy होता है।

Sass and CSS Relationship

Sass को CSS का replacement नहीं माना जाता, बल्कि यह CSS का extension है।

• Sass में लिखा हर code finally CSS में convert होता है
• Browser सिर्फ CSS को समझता है
• Sass developer के लिए writing process को आसान बनाता है

आप यह मान सकते हैं कि Sass, CSS को superpower देता है।

Sass Features Overview

Sass में आपको जो main features मिलते हैं, उनकी short overview नीचे दी गई है:

• Variables for reusable values
• Nesting for better structure
• Partials for file separation
• Mixins for reusable blocks
• Extend for inheritance
• Operators for calculations
• Functions for dynamic styling
• Control directives for logic-based CSS

इन सभी topics को आगे के chapters में detail में examples के साथ समझाया जाएगा।

Conclusion

इस Sass Introduction chapter में आपने यह सीखा:

• Sass क्या है
• Sass क्यों use किया जाता है
• Sass CSS से बेहतर कैसे है
• Sass कैसे काम करता है
• Sass file types क्या होती हैं

अब आपको यह clear idea मिल गया होगा कि Sass सीखना क्यों जरूरी है और यह आपकी CSS skills को next level पर कैसे ले जा सकता है।