Compiling Sass

Because Sass is a CSS preprocessor, the Sass file must be run through a Sass compiler. For this course, we will be using the Visual Studio Code extension Live Sass Compiler for our Sass compiler. Please refer to the Visual Studio Code page for more information on installing Visual Studio Code and extensions.

NOTE

There many other options for compiling Sass. Review Install Sass to learn more.

Syntax and File Extensions

The default syntax for Sass is known as SCSS (Sassy CSS) and uses the file extension of .scss. SCSS is a superset of CSS, which means that all valid CSS is also valid SCSS.

The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

For this course, we will be using the SCSS syntax.

Configuring Live Sass Compiler

Live Sass Compiler will compile Sass/SCSS files in real time with live browser reload, when using Live Server, and it is easy to use.

Before we begin compiling our Sass, we will need make changes to the Live Sass Compiler settings. This is done by directly editing the Visual Studio Code settings.json file.

NOTE

If you used the Settings Sync extension to set up Visual Studio Code. This may already be done for you.

1. Open Visual Studio Code Command Palette (ctrl+shift+p - Windows or cmd+shift+p - macOS).
2. Type settings.json and select Preferences: Open Settings
3. Add the following code to the end the settings.json file:

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

Using Live Sass Compiler

Once the Live Sass Compiler extension has been properly configured, we can complete the following steps to start compiling our Sass.

1. With a Sass file open, click Watch Sass in the Statusbar to start the live compilation.
2. All Sass files (partials will be ignored) will be compiled and stored in the /css/ folder. Two versions of the CSS will be created. A development version with an extension of .css and a production version with an extension of .min.css. The production version will be compressed.
3. The extension will continue to watch for changes and automatically compile the Sass files as changes are made. To stop, click Watching... in the Statusbar.