Setting up SASS on Your Local Server
Tags: productivity, webdev, beginners, tutorial
Published: 2022-09-02 16:10:45

Before we can write Sass code, it needs to be installed locally. As by default, it’s not a language known to the browser.

Let’s now go through the process to setup the Sass environment so we can then write, then compile our own Sass code.

_Note_: When Sass is compiled, it is converted into regular CSS code that browsers can interpret and render.

## Environment Setup
Before we start, you must have **npm** installed on your computer, it comes bundled with [Node.js](https://nodejs.org/en/); you can install it from [here](https://nodejs.org/en/download/). Go ahead and install it if you haven’t already.

If you are unsure whether you have Node.js installed or not, run `node -v` from your terminal.

If you see a version number, it’s installed!

_A note on terminal_:

If you are new to SASS, chances are you may also be new to running commands from the terminal. It’s not as daunting as it might seem! And it’s a real time-saver once you gain more experience.

To open a terminal on a Windows PC, right-click the Windows Icon and select _Windows Powershell, if you’re on a Mac go to Finder > Applications > Utilities > Terminal_.

## Folder Structure
Let’s create our project folders! They will be structured like so:
```sass
sass-project
   |- sass
   |- css
```
To create this structure, open terminal and change to the folder you wish to install the sass project into (via the cd command).

Then run the following commands:
```sass
mkdir sass-project
cd sass-project
mkdir -p sass css
```

## File Structure
You will need an _index.html_ and _main.scss_ in this folder.

To create these files, run:
```sass
touch index.html
cd sass
touch main.scss
cd ..
```
You’ll also need a default CSS stylesheet for the SASS to compile into:
```sass
cd css
touch style.css
```
Open up your _index.html_ and paste in the following code:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Index page</title>
    <link rel=”stylesheet” href=”css/style.css”>
  </head>
  <body>
 
  </body>
</html>
```
This is just our boilerplate code with the stylesheet connected!

## Initializing our Project Directory
All projects that use npm need to be initialized. To do this, ensure you’re still in the sass-project folder and run the following command:
```sass
npm init -y
```
This will create a **package.json** file for our project. We’ll be learning more about the configuration of this file later in the course!

## Install node-sass
**node-sass** is the library which allows us to compile `.scss` to `.css`.

Run the following command to install node-sass as _dev dependency_.
```sass
npm install node-sass --save-dev
```
_Note_: A **dev dependency** is only used in the build phase of our project. It’s not included at runtime.

## Compiling Sass Code to CSS
Next, we need to create an _npm script_ to run the compilation.

Add this script inside the script section of our previously created **package.json** file:
```sass
"compile-sass": "node-sass sass/main.scss css/style.css"
```
_Don’t forget to separate each script with a comma!_

We have here specified **main.scss** as our main Sass file and **style.css** as the compiled CSS file.

To compile our SASS code into CSS, all we need to do is run:
```sass
npm run compile-sass
```

## Live Reload
Let’s also add a live reload to our project! To do this run the following to install globally:
```sass
npm install live-server -g
```
Now, make sure you’re still in the Sass project folder, and run:
```sass
live-server
```
And just like that, you’ve got a pretty neat dev environment with your project running locally on HTTP.

You’ll need to keep `live-server` and `npm run compile-sass` running in two separate terminal windows.

So we now have the project environment all set up on the local machine!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)