Sass Installation

Sass Tutorial

Sass Installation (Step-by-Step)

Sass Installation process is given below because Sass must be installed on your system so it can compile .scss / .sass files into normal .css that browsers understand.

✅ Method 1: Install Sass using Node.js (Recommended)

This is the official and most widely used method.

Step 1: Install Node.js

  • Download from nodejs.org

  • Install the LTS version

  • Verify installation:

node -v
npm -v

Step 2: Install Sass globally

npm install -g sass

Check installation:

sass --version

✔ If a version appears, Sass is installed successfully.

Step 3: Compile Sass to CSS

sass style.scss style.css

Watch Mode (Auto Compile)

Automatically recompiles when the file is saved:

sass --watch style.scss:style.css

✅ Method 2: Install Sass using VS Code Extension (Beginner Friendly)

No terminal required.

  1. Open VS Code

  2. Go to Extensions

  3. Search Live Sass Compiler

  4. Install it

  5. Click “Watch Sass” in the status bar

✔ CSS file is generated automatically.

❌ Method 3: Ruby Installation (Deprecated)

gem install sass

⚠️ Not recommended anymore.

📁 Recommended Folder Structure

project/
│── scss/
│ └── style.scss
│
│── css/
│ └── style.css

Compile:

sass scss/style.scss css/style.css

🎨 Output Style Options

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

Available styles:

  • expanded

  • compressed

  • nested

  • compact

❗ Common Error & Fix

Error: 'sass' is not recognized
Fix:

  • Restart terminal

  • Reinstall Sass

npm install -g sass

📌 Summary

  • Install Sass using Node.js

  • Write styles in .scss

  • Compile to .css

  • Use watch mode for faster development

You may also like...