How to setup SASS in VSCode
3 Aug 2022
Home » BLOG » Web Designer » How to setup SASS in VSCode

How to setup SASS in VSCode

Last updated on   by    /   category:  Web Designer, Web development
  Buy me a coffee!
6 min read

Currently, I am working on setting up SASS for my project in VSCode. I also set up the minify for my CSS file. There are two ways that I use. I will share it with you today.

Using VSCode extensions

VSCode comes with a ton of extensions. When you pick the extensions you gonna use, make sure to check the change log and see if the author is still active.

Live Sass Compiler by Glenn Marks

The extension can help you to compile your SASS/SCSS files to CSS in real-time. You can also enable autoprefix. With autoprefix enabled, your CSS rules will render correctly for all major browsers following Can I Use database.

Installation

Now in VScode, click the extensions menu on the left toolbar, and search for Live Sass Compiler by Glenn Marks. Install the extension in your VSCode. I personally save each project into its own workspace. When I install the extensions, I will enable that extension in the workspace I am working on only. So when I work on other projects, this extension won’t enable in other projects’ workspace. A workspace is a good tool for organizing the extensions for each project for me.

Settings

I normally set only 3 settings after installing. Because I use Workspace, when I edit the Live Sass settings, I will do it under Workspace setting. You can set the settings under User or your current folder. It is up to you.

  • Fore Base Directory: Defines a subdirectory to search from. All SCSS files will store here.
"liveSassCompile.settings.forceBaseDirectory": "/web/src/scss/",
  • Generate Map: I don’t need the “.map” file because I will use another extension to generate it.
"liveSassCompile.settings.generateMap": false,
  • savePath: where the output CSS file after compiled SASS will store.
"liveSassCompile.settings.formats": [
   {
	"format": "expanded",
	"extensionName": ".css",
	"savePath": "/web/css/"
    }
],

Here are the full LiveSass settings.

"liveSassCompile.settings.forceBaseDirectory": "/web/src/scss/",
"liveSassCompile.settings.formats": [
{
	"format": "expanded",
	"extensionName": ".css",
	"savePath": "/web/css/",
}
],
"liveSassCompile.settings.compileOnWatch": true,
"liveSassCompile.settings.generateMap": false,

How to run the Live Sass extension to compile the SCSS files

At the bottom status bar, you will see the “Watch Sass” menu. Click on it, and the Live Sass extension will enable watch mode. The watch mode means that if you make the changes to the SCSS files, the extension will automatically compile the SCSS files for you.

How do you know you are in watch mode? In the terminal, you will see the message saying “Watching..” under the output tab.

Before enabling the Watch mode for the first time after installation, I delete the existing CSS files. Then I click on the “Watch Sass” menu at the bottom status bar. The Live Sass extension is starting to compile the SCSS files. Then put the output CSS files into your savePath setting. Next time, you click on the “Watch Sass” menu, you don’t need to delete the existing CSS files anymore. The new CSS files will replace the existing ones.

To stop the watch mode, you just click on the “Watching..” menu at the bottom status bar.

And that is how to install, set up, and run the Live Sass Compiler in your VSCode.

JS & CSS Minifire (Minify)

JS & CSS Minifire extension is very simple to use. It helps you minify CSS and JS files in one click. You can also enable the source map generator.

Installation

In your VSCode, click on the Extensions menu on the left sidebar, and search for JS & CSS Minifier. Then install the extension.

Settings

I only enable the generation of source map files for CSS files. By default, the extension will save the minified file to the same path as the source file.

The source map file will help you to inspect the readable CSS from the browser.

How to run the minify extension

You will see the “Minify” menu at the bottom status bar when you enable the extension. Open the CSS file you want to minify. Then click on the “Minify” menu. The output of the CSS file (*.min.css, *.min.css.map) will be generated and stored at the same path as your CSS file.

The extension won’t search the CSS files for you. You must open the CSS file you want to minify then click on the “Minify” menu. Then you will have the minify CSS files.

Note that, the minify extension can minify the JS file and generate the source map file as well.

And that is how to minify the CSS file and generate the source map file.

Tips

  • When you disable these extensions, you should close and open the VScode again.
  • When you change the CSS files or JS files and view them on your browser, make sure you clear the browser cache before seeing the changes. Since the browser normally stores the static files in a cache for fast loading for the viewer.

Using Gulp

Gulp is a task runner that uses Node.js as a platform. Gulp helps to run front-end tasks such as minifying CSS and JS files, compiling SCSS files, and more. Gulp builds the automated tasks that save your developing time. I like Gulp because it is easy to understand and easy to build Gulpfile.js since Gulp uses the JavaScript Code purely. The command is short and simpler. Of cause, you can use Grant, Webpack, or Yarn. It is totally up to you. But in this post, I will use Gulp.

Installation

  • Install Node.js : After installing Node, you will have an npm package as well. We will use npm to run the command for installing our dependencies in the terminal. You will notice that now we will have a node_modules folder with a bundle of files in there. This is for Node uses. All dependencies we install will store in this folder as well.
  • Generate the package.json by running the command below in your terminal in VSCode. This command will create a new package.json at the root directory for you. All dependencies information will store in this file.
npm init
  • Install dependencies that we will need. We will install each dependency in the terminal.

install autoprefixer

npm i --save-dev gulp-autoprefixer

install gulp-rename

npm i --save-dev gulp-rename

install gulp-sass

npm i --save-dev gulp-sass

install gulp-sourcemaps

npm i --save-dev gulp-sourcemaps

install sass

npm i --save-dev sass

install gulp

npm install --save-dev gulp

install gulp cli

npm install --global gulp-cli
  • Now you install all dependencies we need. You can check them in the package.json.

What if you already had package.json

If you already had the package.json and you want to install all dependencies regarding the package.json stored, you simply run `npm install`. You will need to be on the same path where package.json is located before running the command as the sample below.

  • your root directory
    • package.json

You want to be on the same path that package.json is located in the terminal before running the command.

npm install

After running the `npm install` command, it will create a new node_modules folder on the same path where package.json is located. The node_modules folder contains all dependencies regarding the package.json. Also, it will create a new package-lock.json as well. This package-lock.json describes the exact dependency tree that was installed. 

Create a gulpfile.js

Next, we will create the gulpfile.js in the root directory.

Here is our file structure so far.

  • root directory
    • node_modules
    • gulpfile.js
    • package.json
    • package-lock.json

In the gulpfile.js, we will add the gulp tasks for compiling the SCSS file and minifying the CSS file. Below is the code for gulpfile.js.

const gulp = require('gulp'),
  rename = require('gulp-rename'),
  sass = require('gulp-sass')(require('sass')),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps = require('gulp-sourcemaps');

// Define reusable paths
// TODO: change the source and destination path for output of compiling SCSS file and minifing CSS file.
const path = {
  src_scss: 'web/src/scss',
  dist_css: 'web/css'
}


// TODO: I use "theme.scss" but you will change to your scss file to compile.
// Sass compiling

// Expanded: 
// compiles .scss files into non-minified CSS (css/theme.css). From src_scss to dist_css folder.
gulp.task('sass:expanded', () => {
  const options = {
    outputStyle: 'expanded',
    precision: 10 // rounding of css color values, etc..
  };
  return gulp.src(path.src_scss + '/theme.scss')
    .pipe(sass.sync(options).on('error', sass.logError))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(gulp.dest(path.dist_css));
});

// Minified:
// compiles .scss files into minified CSS (css/theme.min.css). From src_scss to dist_css folder.
gulp.task('sass:minified', () => {
  const options = {
    outputStyle: 'compressed',
    precision: 10 // rounding of css color values, etc..
  };
  return gulp.src(path.src_scss + '/theme.scss')
    .pipe(sourcemaps.init())
    .pipe(sass.sync(options).on('error', sass.logError))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.dist_css));
});


// Default task - the dependent tasks will run in parallell
gulp.task(
  'default',
  gulp.series(gulp.parallel('sass:minified', 'sass:expanded'))
);

/**
* usage:
* run `gulp` which is set as default task
* or run `gulp sass:minified`
* and then `gulp sass:expanded`
* or run `gulp sass:minified sass:expanded`
*/

You can see the code is readable without explanation. Because code is JavaScript. From the code above, you will see TODO that I add. That means you have to change the following TODO note.

Here is the result from running the gulp command.

Compile SCSS file and minify CSS file by Gulp

You will get the new or updated theme.css, theme.min.css, and theme.min.css.map in your destination path. This setup works well with Bootstrap5 SASS. It should work with any custom SCSS files you create as well.

Wrap up

When you work on a big website like market place website or a large web application, it is a good idea to set up automatic tasks. While you are developing the project, the designer may change the typography or header title style or etc. Using SASS and setup automatic tasks like minification is saving a huge time. If you ask me which way I prefer to set up, I prefer Gulpjs to the VSCode extension. Since developers who develop the extension may abandon it someday. Then you will need to find the new one and set it up again.

And that’s it for today. If you like my post and it is helpful, please consider buying me a coffee. Coffee always makes me smile.