Development Environment Setup for Sass/SCSS

In this Sass/SCSS tutorial we learn how to set up a complete development environment with Node & NPM, Visual Studio Code and Sass.

We also cover how to set up a workspace, initialize a project and working with the terminal.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

Sass/SCSS Development Environment

Before we can start writing any Sass code, we will need to set up a development environment.

For this course, our development environment will consist of the following technologies:

1. Node.js and the accompanying Node Package Manager (NPM) to install and run Sass.

In this course we’ll be using the Javascript implementation of Sass, which requires the Node environment.

Sass can also integrate easily into other languages like C, Rust and Python with LibSassOpens up in a new page if that’s what you need.

The Ruby implementationOpens up in a new page of Sass reached its end of life in March 2019. Ruby is no longer required for Sass.

2. MS Visual Studio Code as our code editor.

VS Code is a free IDE for Windows, Mac and Linux with native Sass support. It has an integrated terminal, as well as some optional extensions, that will make our lives just a little bit easier.

If you don’t want to use VS Code as your code editor, you could try one of the following options.

  • (free) AtomOpens up in a new page
  • (free) Visual Studio Community 2019Opens up in a new page
    • Installation instructions can be found in the official documentation for WindowsOpens up in a new page or MacOpens up in a new page .
    • Any version above 16.3 has an integrated terminal.
  • (free or paid) Sublime TextOpens up in a new page
    • Installation instructions can be found in the unofficial documentationOpens up in a new page .
    • Optionally, a terminal can be added with the TerminusOpens up in a new page package.
  • (paid) JetBrains WebStormOpens up in a new page
    • Installation instructions can be found in the Help sectionOpens up in a new page .
    • Webstorm has an integrated terminal.

There are also a few GUI applications that will help you get up and running with Sass quickly.

  • (free) KoalaOpens up in a new page
  • (free) Scout AppOpens up in a new page

Lastly, there are web-based services that allow you to work with Sass.

  • CodepenOpens up in a new page .
    • Instructions on how to use a preprocessor can be found in the documentationOpens up in a new page

We recommend setting up an environment that will closely mimic the one you will be using in production.

3. Local Sass installation.

We’re going to install Sass locally instead of globally to avoid any conflicts that may arise.

Install Node.js

Node.js is a runtime environment that can execute JavaScript code outside of a web browser.

Node comes bundled with the Node Package Manager (NPM) which allows us to easily install and manage Javascript packages like Sass.

First, let’s see if we already have Node.js installed on the system.

Windows:

Click on Start/Windows button, type cmd and press Enter to launch the Command Prompt.

Mac:

Open Applications > Utilities and double-click on Terminal.

Linux:

Press Ctrl + Alt + T to open the terminal.

Type in the following command and press Enter/Return.

Command:
node -v

If Node.js is installed, it will show a version number, similar to the one below.

Output:
v12.14.1

If you don’t have Node.js installed, please follow the steps below to install it on your system.

Windows:

  1. Point your browser to the Node.js DownloadsOpens up in a new page page.
  2. Ensure that you are selecting from the LTS (Long Term Support) tab.
  3. Choose either the 32 bit or 64 bit .msi installer, based on which version of Windows you're runningOpens up in a new page .
  4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Mac:

  1. Point your browser to the Node.js DownloadsOpens up in a new page page.
  2. Ensure that you are selecting from the LTS (Long Term Support) tab.
  3. Choose the 64 bit .pkg installer.
  4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Linux:

  1. Head over to NodesourceOpens up in a new page and follow the installation instructions.

Nodesource provides the official Node.js binary distributions.

Verify:

To verify that Node.js was installed, run the following command in your terminal. Any version number means the installation was successful.

Command:
node -v

Install MS Visual Studio Code

Please follow the steps below to set up MS Visual Studio Code.

  1. Point your browser to the Visual Studio Code downloadsOpens up in a new page page.
  2. Choose a download based on your operating system and install VSCode once the download has finished.

A note for Windows users: If you are on a shared computer, choose the User Installer. Otherwise, choose the System Installer.

If you’re having trouble installing VSCode, please see the official documentationOpens up in a new page for help.

Workspace

Next, we need to create a workspace. A workspace is simply a folder somewhere on our system that contains all the files we need for our project.

  1. Create a single folder called ‘LearningSass’ on the Desktop.
  2. Open the folder as a project/workspace in your IDE.

If you’re working in Visual Studio Code, go to File > Open Folder, navigate to the ‘LearningSass’ folder on the Desktop and select Open Folder.

Terminal

From this point, we’re going to start working in the terminal.

If you’re working in Visual Studio Code, go to Terminal > New Terminal to launch a new terminal instance in the bottom pane of the IDE.

It will automatically be pointed to the ‘LearningSass’ folder so there’s no need to navigate to it and you can skip to the next section .

If you’re not working with VS Code, or an editor with an integrated terminal, you will have to open your terminal and navigate to the ‘LearningSass’ folder manually.

Windows:

Click on Start/Windows button, type cmd and press Enter to launch the Command Prompt.

Mac:

Open Applications > Utilities and double-click on Terminal.

Linux:

Press Ctrl + Alt + T to open the terminal.

To navigate to a directory on the computer, we use the cd (change directory) command, followed by the path to the directory we want to change to.

Command:
cd Desktop/LearningSass

The command above tells the terminal that we want to navigate into the Desktop, then the ‘LearningSass’ folder.

As a quick aside, if you want to navigate up into a parent directory, use the ../ command.

Command:
cd ../

If we’re in the ‘Desktop/LearningSass’ directory, the command above will move up one level to ‘Desktop’.

Going back into the ‘LearningSass’ folder from there is easy.

Command:
cd LearningSass

When we’re in the ‘LearningSass’ folder, we can initialize our project and generate a package.json file.

NPM init & package.json

Any project that uses Node.js will need to have a package.json file, and when we initialize a project with the init command, we generate this file.

Basically, it will contain information about the project, its source control, any dependencies it has and commands that it uses.

To initialize a project, run one of the following commands in the terminal in your project directory.

Command:
npm init --yes

If you add the --yes flag to the command, it will initialize the project immediately without asking you to input the details of your project.

It’s worth noting that you can change these details by editing the package.json file directly, so it doesn’t really matter if you skip them now. The defaults are fine at this point.

Command:
npm init

If you don’t add the flag, the console will ask you to enter certain details about your project. If you want to skip one of the questions, you can simply press Enter.

When the project has been initialized, you should see the package.json file in the ‘LearningSass’ folder.

If you open it, it will look similar to the following.

Output:
{
  "name": "LearningSass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install Sass

Finally we’re ready to install Sass.

As mentioned before, we will install Sass locally. This means that it will only be available in the current project and so avoid any conflicts or complications because of a global installation.

To do this, run the following command in the terminal in your project directory.

Command:
npm install sass --save-dev

While that’s installing, let’s go through the command above.

The first part is the way we install any NPM package.

Command:
npm install [package]

The [package] part is replaced by the name of whatever we want to install, in this case sass .

The next part is the flag that specifies extra options.

Command:
--save-dev

This particular flag tells NPM that we want to save Sass as a development dependency.

We also have the option to save Sass as a runtime dependency by changing the flag.

Command:
--save

Once Sass has finished installing, there should be a new folder called ‘node_modules’ in the project. This folder contains Sass and all of its own dependencies.

The package.json file has also changed.

Output:
{
  "name": "LearningSass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.26.8"
  }
}

We can see a new entry called devDependencies with the sass version underneath it.

This means that anyone working with this project will need to have those dependencies installed.

As an example, let’s consider that we want to share this project with someone. We would need to include the whole ‘node_modules’ folder so that the other person working on it will have the same tools available.

The problem is that the ‘node_modules’ folder can, in some cases, become extremely large.

If we specify our runtime and development dependencies, we don’t have to include the ‘node_modules’ folder when we share the project (or add it to source control).

The other person can then install all of these dependencies on their own system with just one command.

To demonstrate, let’s delete the whole ‘node_modules’ folder from our project.

To reinstall all the dependencies from the package.json file, we simply have to run the following command.

Command:
npm install

Once the installation has finished, the ‘node_modules’ folder will be back, along with Sass.

Summary: Points to remember

  • To use the Javascript implementation of Sass, we need to have a Node environment.
  • To change to a directory from the terminal, we use the cd dir_name command.
  • To initialize a project, we use the npm init command.
    • If we want to initialize the project immediately without the customization questions, we add the –yes flag.
  • To install Sass locally as a dev dependency, we use the npm install sass –save-dev command.
    • Runtime dependencies use the –save flag.
  • When sharing or moving a project, we don’t have to include the ‘node_modules’ folder.
    • We can reinstall missing dependencies with the npm install command.