Course Progress 13%

Sass Installation

← Sass Intro Sass Comments →

Sass एक CSS preprocessor है, जिसका उपयोग करके हम CSS को ज्यादा powerful, reusable और maintainable बना सकते हैं। Sass को use करने से पहले हमें इसे अपने system में install करना होता है। इस chapter में हम Sass installation को step-by-step, बहुत ही simple तरीके से समझेंगे, ताकि एक beginner भी आसानी से Sass का use शुरू कर सके।

Sass क्या है और Installation क्यों जरूरी है

Sass सीधे browser में run नहीं करता। Browser केवल CSS को समझता है। इसलिए Sass files को पहले CSS में convert किया जाता है। यह conversion Sass compiler के द्वारा होती है। Sass compiler use करने के लिए Sass का install होना जरूरी है।

Sass install करने के बाद हम .scss या .sass files लिख सकते हैं और उन्हें automatically .css files में convert कर सकते हैं।

Sass Install करने के तरीके

Sass को install करने के कई तरीके हैं। सबसे ज्यादा popular और recommended तरीका Node.js के through Sass install करना है। इसके अलावा कुछ systems में Sass पहले से installed भी हो सकता है।

इस chapter में हम सबसे common और beginner-friendly तरीकों को समझेंगे।

Method 1: Node.js का उपयोग करके Sass Install करना

Node.js एक JavaScript runtime है, जिसकी मदद से हम system पर Sass install कर सकते हैं।

Step 1: Node.js Install करना

सबसे पहले आपको अपने system में Node.js install करना होगा।

Node.js install होने के बाद आपके system में npm (Node Package Manager) automatically install हो जाता है। npm की मदद से हम Sass install करेंगे।

यह check करने के लिए कि Node.js और npm सही से install हुए हैं या नहीं, Command Prompt या Terminal खोलें और नीचे दिए गए commands run करें।

node -v
npm -v

यह code आपके system में installed Node.js और npm का version दिखाता है।
अगर version number दिखाई देता है, तो इसका मतलब Node.js और npm सही से install हो चुके हैं।

Step 2: Sass Install करना

अब npm का उपयोग करके Sass install करें।

npm install -g sass

यह code npm को instruct करता है कि Sass package को globally install किया जाए।
-g का मतलब है global installation, जिससे Sass पूरे system में कहीं भी use किया जा सके।

इस command को run करने के बाद npm internet से Sass download करेगा और system में install कर देगा।

Step 3: Sass Installation Verify करना

Sass सही से install हुआ है या नहीं, यह check करने के लिए नीचे दिया गया command run करें।

sass --version

यह command Sass का installed version दिखाता है।
अगर version दिखाई देता है, तो इसका मतलब Sass successfully install हो चुका है।

Method 2: Dart Sass का Direct Use

Sass का official और recommended implementation Dart Sass है। npm के through install किया गया Sass भी Dart Sass ही होता है।

Dart Sass fast, stable और future-ready है, इसलिए beginners के लिए यह best option है।

Sass Files और Folder Structure

Sass install होने के बाद हम Sass files create कर सकते हैं।

Sass files के दो common formats होते हैं:

  • .scss
  • .sass

Beginner users के लिए .scss ज्यादा easy होता है क्योंकि इसका syntax CSS जैसा ही होता है।

Example file structure:

project/
  css/
    style.css
  scss/
    style.scss

इस structure में:

  • style.scss Sass file है
  • style.css compiled CSS file है

Sass को CSS में Compile करना

अब हम Sass file को CSS में convert करना सीखेंगे।

Single File Compile करना

sass style.scss style.css

यह code Sass compiler को बताता है कि style.scss file को पढ़कर style.css file generate करे।

इसका result यह होगा कि आपकी Sass code CSS में convert हो जाएगी और browser में use की जा सकेगी।

Folder को Watch Mode में Compile करना

जब हम project पर काम कर रहे होते हैं, तो बार-बार compile करना time-consuming हो सकता है। इसके लिए Sass watch mode देता है।

sass --watch scss:css

यह code Sass को instruct करता है कि:

  • scss folder की सभी .scss files को watch करे
  • changes होने पर automatically उन्हें css folder में .css files में convert करे

इसका result यह होता है कि जैसे ही आप Sass file save करते हैं, CSS file अपने आप update हो जाती है।

Sass का Output Style समझना

Sass compile करते समय हम output style भी define कर सकते हैं।

Example:

sass style.scss style.css --style=compressed

यह code Sass को बताता है कि output CSS को compressed format में generate करे।

Compressed CSS में:

  • extra spaces नहीं होते
  • file size कम होती है
  • website fast load होती है

यह production environment में बहुत useful होता है।

Sass को किसी Editor के साथ Use करना

Sass install होने के बाद आप इसे किसी भी code editor के साथ use कर सकते हैं, जैसे:

  • VS Code
  • Sublime Text
  • Atom

Editors में Sass syntax highlighting और auto-completion available होती है, जिससे code लिखना आसान हो जाता है।

Sass Installation के बाद अगला Step

Sass install होने के बाद आप variables, nesting, mixins और functions जैसे powerful features का use कर सकते हैं।
अब आपका system Sass development के लिए पूरी तरह ready है और आप real-world CSS problems को आसानी से solve कर सकते हैं।

← Sass Intro Sass Comments →
  • Home