Sass में comments का उपयोग code को समझाने, documentation लिखने और future reference के लिए किया जाता है। Comments browser में दिखते नहीं हैं और website के design पर कोई effect नहीं डालते। Sass में comments लिखना बहुत important होता है, खासकर जब project बड़ा हो या multiple developers साथ में काम कर रहे हों।
इस chapter में हम Sass comments के types, उनका syntax, उनका व्यवहार और CSS output में उनका effect बहुत ही simple और beginner-friendly तरीके से समझेंगे।
Comment क्या होता है?
Comment ऐसा text होता है जिसे compiler या browser ignore कर देता है। इसका मतलब है कि comment सिर्फ developer के लिए होता है, program execution या styling पर इसका कोई असर नहीं पड़ता।
Sass में comments का use करके हम यह बता सकते हैं कि code का कोई particular हिस्सा क्या काम कर रहा है या क्यों लिखा गया है।
Sass में Comment के Types
Sass में मुख्य रूप से दो types के comments होते हैं:
- Single-line comments
- Multi-line comments
इन दोनों का behavior CSS output में अलग-अलग होता है।
Single-Line Comment (//)
Single-line comment Sass में // से लिखा जाता है। यह comment केवल उसी line तक valid रहता है।
Syntax
// यह एक single-line comment हैयह code Sass compiler को बताता है कि इस line को ignore कर दिया जाए।
यह comment सिर्फ Sass file में दिखाई देता है और compiled CSS file में include नहीं होता।
Example
// Primary color define किया जा रहा है
$primary-color: blue;
यह code $primary-color variable को define करता है और उसके ऊपर लिखा गया comment यह explain करता है कि यह color किस purpose के लिए use हो रहा है।
इस comment का use इसलिए किया गया है ताकि future में code पढ़ते समय यह clear रहे कि यह variable क्यों बनाया गया है।
जब इस Sass code को CSS में compile किया जाएगा, तो output कुछ ऐसा होगा:
इसका मतलब है कि single-line comment पूरी तरह remove हो जाता है और CSS file में दिखाई नहीं देता।
Multi-Line Comment (/* */)
Multi-line comment Sass में /* और */ के बीच लिखा जाता है। यह comment multiple lines में लिखा जा सकता है।
Syntax
/* यह एक
multi-line comment है */
यह comment Sass और CSS दोनों में valid होता है।
Example
/* Button styles start */
.button {
background-color: green;
color: white;
}
यह comment यह बताता है कि नीचे दिया गया code button styling के लिए है।
इस comment का use code को logically divide करने और readability improve करने के लिए किया गया है।
जब इस Sass code को CSS में compile किया जाता है, तो output कुछ ऐसा होगा:
/* Button styles start */
.button {
background-color: green;
color: white;
}
यह दिखाता है कि multi-line comment compiled CSS file में भी बना रहता है।
Sass में कौन सा Comment CSS में Output होता है
Sass में comment का output behavior बहुत important होता है।
//single-line comments CSS output में नहीं आते/* */multi-line comments CSS output में आते हैं
इसका मतलब है कि अगर आप चाहते हैं कि comment CSS file में भी दिखाई दे, तो आपको multi-line comment use करना चाहिए।
Silent Comments
Single-line comments को Sass में silent comments भी कहा जाता है।
Example
// यह comment CSS में नहीं जाएगा
p {
font-size: 16px;
}
यह comment सिर्फ developer के लिए है और final CSS output को clean रखने में मदद करता है।
इसका result यह होता है कि CSS file में unnecessary comments नहीं जाते, जिससे file size कम रहता है।
Loud Comments
Multi-line comments को loud comments भी कहा जाता है क्योंकि यह CSS output में भी दिखाई देते हैं।
Example
/* Main content styles */
.content {
padding: 20px;
}
यह comment CSS file में भी रहेगा और यह बताने में मदद करेगा कि यह code किस section के लिए लिखा गया है।
Compressed Output में Comments का Behavior
जब Sass को compressed style में compile किया जाता है, तो comments का behavior बदल सकता है।
Example
sass style.scss style.css --style=compressed
इस command का use CSS file size को minimize करने के लिए किया जाता है।
इस case में:
- Single-line comments पहले ही remove हो चुके होते हैं
- Multi-line comments भी remove हो सकते हैं, अगर वे important नहीं हैं
इसका result यह होता है कि production CSS file fast loading के लिए optimized होती है।
Sass Comments का Best Practice
Sass में comments लिखते समय कुछ best practices follow करनी चाहिए:
- Code explain करने के लिए meaningful comments लिखें
- Unnecessary comments avoid करें
- Development के दौरान
//comments ज्यादा use करें - Documentation के लिए
/* */comments use करें
Comments code को समझने में मदद करते हैं और project की maintainability को काफी improve करते हैं।
Sass Comments क्यों जरूरी हैं
Sass comments beginner और professional दोनों के लिए बहुत useful होते हैं।
यह code को readable बनाते हैं, debugging आसान करते हैं और future changes को safe बनाते हैं।
Sass comments सही तरीके से use करने पर आपका code clean, professional और easy to understand बन जाता है।