DEV Community

Cover image for Setting up SASS

Posted on


Setting up SASS

Hey Guys and Gals!

Currently I am working on a little somethin' somethin' and for the first time I had to start using Sass! So, of course I thought of writing a blog on setting up.

  1. Set up a package.json file so that you can alter Sass settings.

    npm init

  2. Install Sass

    npm install node-sass

Inside the package.json file, (on windows) press ctrl+f and search sass, there you will find it as part of the packages installed.

  1. VS Code Extension or npm.

Here you will have to decide whether you want to install the extension on your VS Code then run sass server which you can find it by typing Live Sass Compiler in the extensions and install it. On the lower right hand side, you can click watch sass and that will start the server. Or, you can alter the package.json file and run the sass through the terminal.

locate this in the package.json file,

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
Enter fullscreen mode Exit fullscreen mode

change "test" to "sass" and add the following,

"scripts": {
"sass": "node-sass -w scss/ -o css/ --recursive"
Enter fullscreen mode Exit fullscreen mode

now you can run the sass script through your terminal by typing this command

npm run sass
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

yaireo profile image
Yair Even Or

no no no, never install node-sass. only install sass.

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.