3 min read Internet

How to setup SCSS on your computer

SCSS is a CSS pre-processor. By using a pre-processor like SCSS you can easily write simple and elegant CSS. You also have added advantage of variables, arithmetic operations and more. And overall writing sass can be more productive than writing simple CSS.

Even though SCSS is similar to css and even though you can write regular CSS in a CSS file, still your browser won’t render SCSS files unless you compile them to CSS files.

In this post I will show you how you can setup SCSS compiler on your computer so you can easily compile sass files to regular css files to be used on your next web project.

Why SCSS over CSS?

Before I write how you can setup SCSS I will show some of the capabilities of SCSS over CSS and how it can improve the way you write CSS.

Variables

You can declare variables in SCSS by using the $ sign followed by a variable name.

For example, let’s say you want to assign a primary color that you will use throughout your web project. Instead of having to memorize the hex or RGBA value of that color, you can simply specify a variable that you can remember, and use it through out your project.

$primary_color: #3f37c9;

.main-button {
    background-color: $primary_color;
}

Functions

SCSS also has some functions that are useful in web-development. For example, if you want to darken a color of a button on hover, if you write plain CSS you might have to manually find a suitable color by using the web-developer-console on your browser.

However, if you are using SCSS you can simply use SCSS function to darken or lighten a color like this.

$primary_color: #3f37c9;

.main-button {
    background-color: $primary_color;
    :hover {
        background-color: darken($primary_color, 10%);
    }
    :focus {
        background-color: lighten($primary_color, 10%);
    }
}

The darken function will darken the $primary_color by 10% and the lighten function will lighten the color by 10% etc.

These are some of the most common use cases that I love when using sass. There are lots of features such as this in sass that you can read it from their documentation at http://scss-lang.com.

Installing the SCSS compiler

There are several ways and tools to compile SCSS to CSS files. There are GUI tools as well as terminal tools. In this post I will show you how to setup the NodeJS compiler of SCSS and how you can compile SCSS files to CSS.

Step 1 – Install NodeJS on your computer

If you don’t have NodeJS installed on your computer, download and install the NodeJS version that matches your operating system and processor architecture. NodeJS supports Apple M1 processor since version 16.

There are two types of distributions, the long term support version (LTS) which is currently 14 at the time of writing and the latest version which is version 16 at the time of writing.

You can download the NodeJS from their website at http://nodejs.org

Download and install NodeJS. If you are a windows user, you might have to add NodeJS path to your command.

You can check if NodeJS is correctly installed by running the following command from your command line. 

node -v

Step 2 – Install SASS

You can install sass globally, or locally on your project. If you install sass globally it will be accessible anywhere through your command line, and if you install it on your project it will only be accessible within your project folder.

Personally I prefer installing it within the project folder. You can install it though the node package manager (NPM) by running the following command.

npm install -save-dev sass

Step 3 – Compile SCSS files to SCC

Now you can simply compile SCSS files to CSS files by running the following command. 

node sass source/stylesheets/index.scss build/stylesheets/index.css

If installed sass globally you can run without including the node at the beginning on your command prompt.

The first parameter is the path to your source file, which is a sass file. The second parameter is the destination file where your compiled css file will be created.

Now you can include the compiled css file on your web project.

You can also use the -w switch to watch for changes, so when you include the -w switch the sass compiler will look for changes whenever you make a modification to the sass file and a newer css file will be compiled by using the source.

node sass -w source/stylesheets/index.scss build/stylesheets/index.css

I personally setup sass compiler together with a task runner like Gulp so I can easily run the sass compiler and other tasks together.

I will write a separate post on how to set up Gulp as a task runner for your NodeJS project at a later time.

Rukshan

Rukshan