Episode 2 of 12

Download & Compiling SASS

Set up SASS — install it, compile .scss files into CSS, and watch for changes automatically.

Download & Compiling SASS

Let's get SASS installed and learn how to compile .scss files into CSS.

Installation Options

Option 1: npm (Recommended)

# Install globally
npm install -g sass

# Verify
sass --version

Option 2: As a Project Dependency

# In your project folder
npm init -y
npm install --save-dev sass

Project Structure

my-project/
├── scss/
│   └── style.scss      ← Write SASS here
├── css/
│   └── style.css       ← Compiled CSS goes here
├── index.html
└── package.json

Compiling SASS

# Basic compile:
sass scss/style.scss css/style.css

# This takes the input .scss file and outputs a .css file

Watch Mode (Auto-Compile)

# Watch a single file:
sass --watch scss/style.scss:css/style.css

# Watch an entire folder:
sass --watch scss:css

Watch mode automatically recompiles whenever you save a .scss file. This is what you'll use during development.

Using npm Scripts

// package.json
{
    "scripts": {
        "sass": "sass scss/style.scss css/style.css",
        "sass:watch": "sass --watch scss:css",
        "build": "sass scss:css --style=compressed"
    }
}

# Run with:
npm run sass:watch

Output Styles

Style	Command	Use For
Expanded (default)	`--style=expanded`	Development — readable CSS
Compressed	`--style=compressed`	Production — minified CSS

// Expanded (default):
.button {
    background: #3498db;
    color: white;
    padding: 10px 20px;
}

// Compressed:
.button{background:#3498db;color:white;padding:10px 20px}

Source Maps

# SASS generates .map files by default
sass scss/style.scss css/style.css
# Creates: css/style.css and css/style.css.map

# Disable source maps:
sass --no-source-map scss/style.scss css/style.css

Source maps let browser DevTools show you the original SCSS line numbers instead of the compiled CSS — very useful for debugging.

Your First SCSS File

// scss/style.scss
$bg-color: #2c3e50;
$text-color: #ecf0f1;
$accent: #e74c3c;

body {
    background: $bg-color;
    color: $text-color;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: $accent;
    text-align: center;
    padding: 40px 0;
}

Linking Compiled CSS

<!-- index.html — link to the COMPILED .css, not .scss -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Hello SASS!</h1>
</body>
</html>

VS Code Extension

Install the "Live Sass Compiler" extension for VS Code. It auto-compiles SASS every time you save — no terminal needed. Click "Watch Sass" in the bottom status bar to start.

Key Takeaways

Install SASS with npm install -g sass
Compile: sass input.scss output.css
Watch mode: sass --watch scss:css for auto-compilation
Use --style=compressed for production builds
Source maps help debug by mapping back to original SCSS lines
Link the compiled .css file in your HTML, not the .scss file