How to Set Up SCSS in VS Code: Step-by-Step Installation Guide

Why Use SCSS in VS Code?

SCSS (Sassy CSS) is the most popular CSS preprocessor syntax, and Visual Studio Code is the world's most widely used code editor. Together they create a powerful front-end workflow. Instead of writing repetitive CSS, you write structured, maintainable SCSS — variables, nesting, mixins, and functions — and let a compiler transform it into standard CSS that browsers understand.

Setting up SCSS in VS Code is surprisingly straightforward. You have two main paths: use the Live Sass Compiler VS Code extension for a zero-config experience, or install dart-sass via npm and run it from the terminal as a watch task. This guide covers both approaches so you can pick the one that fits your workflow.

Method 1: Live Sass Compiler Extension (Recommended for Beginners)

The Live Sass Compiler extension by Glenn Marks compiles your SCSS files automatically every time you save. It requires no Node.js or command-line knowledge — perfect if you want to get started quickly.

Step 1: Install the Extension

1. Open VS Code and press Ctrl+Shift+X to open the Extensions panel.
2. Search for "Live Sass Compiler" (author: Glenn Marks — make sure it's the actively maintained version).
3. Click Install.
4. Reload VS Code if prompted.

Step 2: Start Watching SCSS Files

Once installed, you'll see a "Watch Sass" button in the VS Code status bar at the bottom. Click it and it turns into "Watching...". Now every time you save a .scss file, the extension compiles it to .css automatically.

Step 3: Configure Output Location via settings.json

By default, the compiled CSS is placed next to the SCSS file. You can change the output directory by editing your VS Code settings.json. Press Ctrl+Shift+P, search for Open Workspace Settings (JSON), and add:

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  "liveSassCompile.settings.generateMap": true
}

The savePath key controls where the CSS is written. A value of "/css" means a css/ folder at the root of your workspace. You can also use a relative path like "~/../css" to go one level up from the SCSS file.

Available Format Options

• expanded — Normal, readable CSS (best for development)
• compressed — Minified CSS (best for production)

You can even add two format objects to generate both simultaneously:

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css"
    }
  ]
}

Method 2: Install Dart Sass via npm

For professional projects with build pipelines, installing dart-sass directly gives you the latest Sass features including the modern @use and @forward syntax. Dart Sass is the current primary implementation of Sass maintained by the Sass team — it replaced Ruby Sass and LibSass.

Step 1: Install Node.js

Download and install Node.js from nodejs.org. This also installs npm (Node Package Manager).

Step 2: Install Dart Sass

Open the VS Code integrated terminal (Ctrl+`) and run:

# Install globally (usable anywhere)
npm install -g sass

# Or install locally in your project
npm install --save-dev sass

Verify the installation:

sass --version
# Output: 1.77.x compiled with dart2js 3.x.x

Step 3: Compile SCSS Manually

Compile a single file:

sass src/scss/main.scss css/main.css

Step 4: Run a Watch Task

Instead of compiling manually every time, use the --watch flag to automatically recompile on every save:

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

# Watch an entire directory
sass --watch src/scss/:css/

Step 5: Add npm Scripts

Add the watch command to your package.json so you can run it easily:

{
  "scripts": {
    "sass": "sass --watch src/scss/:css/",
    "sass:build": "sass src/scss/:css/ --style=compressed --no-source-map"
  }
}

Now run npm run sass to start watching, and npm run sass:build to compile for production.

Project Structure Best Practices

A well-organised SCSS project uses the 7-1 pattern or a simplified version of it. Here's a solid starting structure:

src/
└── scss/
    ├── main.scss          ← Entry point, imports everything
    ├── _variables.scss    ← Colors, fonts, spacing
    ├── _mixins.scss       ← Reusable mixins
    ├── _reset.scss        ← CSS reset/normalize
    ├── _typography.scss   ← Font styles
    ├── _layout.scss       ← Grid and page layout
    ├── _components.scss   ← Buttons, cards, etc.
    └── _utilities.scss    ← Helper classes

Note that partial files start with an underscore (_). Sass won't compile these directly — they're only compiled when imported into a main file.

main.scss Entry Point Using @use

The modern way to import partials uses @use instead of the deprecated @import:

// main.scss
@use 'variables' as vars;
@use 'mixins';
@use 'reset';
@use 'typography';
@use 'layout';
@use 'components';
@use 'utilities';

Configuring VS Code for a Better SCSS Experience

Beyond just the compiler, a few extra VS Code settings improve your SCSS workflow significantly.

Recommended Extensions

• SCSS IntelliSense — Autocomplete for variables, mixins, and functions across partials
• Prettier — Auto-format SCSS on save
• stylelint — Lint your CSS/SCSS for errors and style issues

Enable Format on Save

Add these settings to your settings.json:

{
  "editor.formatOnSave": true,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier Config for SCSS

Create a .prettierrc file at your project root:

{
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100
}

Source Maps for Debugging

Source maps let you see the original SCSS line numbers in browser DevTools instead of the compiled CSS lines. Both the Live Sass Compiler and dart-sass generate them by default.

With dart-sass, source maps are generated alongside the CSS. To disable them in production:

sass src/scss/:css/ --style=compressed --no-source-map

In Chrome DevTools, open the Sources panel and you'll see your SCSS files directly. Click a style in the Elements panel and it links straight to the correct SCSS line — a massive time saver.

Troubleshooting Common Issues

"Watch Sass" Button Not Appearing

Make sure you have a .scss file open in the editor. The status bar button only appears when an SCSS file is the active tab.

Output Going to the Wrong Folder

Double-check your savePath in settings. Use an absolute path starting with / for a workspace-relative path, or a ~/ prefix for a path relative to the SCSS file.

@use Module Not Found

When using @use, paths are relative to the current file and you don't include the leading underscore or the .scss extension. @use 'variables' will find _variables.scss in the same directory.

Once you're comfortable writing SCSS, use the CSS Formatter on htmlcsseditor.com to inspect and beautify your compiled output, or run it through the CSS Minifier for production-ready files.