Home / Tutorials / Sass / Environment Setup

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.

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. The Node Package Manager (NPM)

    Every Node.js installation comes bundled with npm, which we will need to install, run and build our Sass/SCSS scripts. We also use it to work with PostCSS later on.

    note If you need it, Sass can integrate easily into other languages like C, Rust and Python through LibSass .

    note Unfortunately, the Ruby implementation of Sass reached its end of life in March 2019. Ruby can not be used for Sass anymore.

  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 alternative IDEs at the end of the lesson.

  3. Local Sass installation.

    The Sass package can be installed either globally (it will be available in any project in our system), or locally (it will be available only to the current project).

    We should always install Sass locally to avoid conflicts between projects.

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.

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

Windows:

  1. Point your browser to the Node.js Downloads 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 running .
  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 Downloads 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 Nodesource 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 downloads page.
  2. Choose a download based on your operating system and install VSCode once the download has finished.

note 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 documentation 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, then 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 be pointed to the “LearningSass” folder automatically, so there’s no need to navigate to it. That also means 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 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.

tip 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

Once 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.

note You can change these details by editing the package.json file directly later on, 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

But Sass is not a runtime environment, so we don’t save it as one.

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.

Bonus: IDE Alternatives

You can find a list of alternative IDEs below if you don’t want to use Visual Studio Code.

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

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

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

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.
Previous
Introduction to Sass & SCSS
Next
First Sass/SCSS Script