Learn to code, step by step

Setting up SCSS in VSCode: A Step-by-Step Guide

Step by step: setting up SCSS in VS Code – installing the editor, adding the Live Sass Compiler extension, and getting your first file to compile.

Why VS Code for SCSS?

VS Code is a solid choice for SCSS work. It is free, cross-platform, and has plenty of extensions that compile Sass as you save. If you already use another editor, that is fine – but this tutorial assumes VS Code because it is what I use here.

Step 1: Install VS Code

If you have not got it yet, download and install Visual Studio Code from the VS Code website. It runs on Windows, macOS, and Linux.

Step 2: Install the Live Sass Compiler extension

With VS Code open, install Live Sass Compiler. It compiles SCSS files to CSS when you save.

Open VS Code.
Click the Extensions icon in the sidebar, or press Ctrl+Shift+X.
Search for “Live Sass Compiler”.
Find the extension by Ritwick Dey and click Install.

Step 3: Configuring the extension

Once installed, add a few settings so the compiled CSS lands where you want it.

Open the Command Palette with Ctrl+Shift+P.
Type “Open Settings (JSON)” and select it.
Add the following settings to customise the output path and format:

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

This outputs an expanded CSS file into a /css folder relative to your SCSS file and generates source maps for easier debugging.

Step 4: Creating your SCSS file

Create a new SCSS file in your project:

Right-click in your project explorer and select ‘New File’.
Name it style.scss.

Step 5: Writing some SCSS

Add some basic SCSS to style.scss:

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}

We declare a variable for the primary colour and use it to set the body text colour.

Step 6: Compiling SCSS to CSS

Open style.scss.
Click “Watch Sass” in the bottom right of the VS Code window.

You should see a /css/style.css file appear with the compiled CSS.

Step 7: Linking the CSS file to HTML

To use the generated CSS in a page:

Create an HTML file in your project.
Link the CSS file in the <head> section:

   <!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
       <h1>Welcome to SCSS!</h1>
   </body>
   </html>

Step 8: Exploring further

Live Sass Compiler has other settings worth trying – minified output, custom save paths, and so on. Have a look through the extension settings once the basics are working.

That is the setup done. From here, the rest of this series covers SCSS syntax and features in more detail.