Sass stands for "Syntactically Awesome Style Sheets". It is compatible with all CSS versions available.

If your CSS is getting complex, harder to maintain, here you can take the help of preprocessor.  Sass allows you to create variable, nesting, mixins, inheritance  and other good things that make your code awesome.

Here, I am with the steps to compile and execute your stylesheets:

1: Create a project, I name it sass.

2. Initialize you project with some defaults:

npm init

Just leave all the asked fields blank.

3. Installing sass compiler:

npm install -D node-sass nodemon

The above will install the compiler.

You can use either node compiler or ruby as per your requirement. I am using node-sass for the simplicity of this tutorial.

4. Make an entry for the source/ destination scss and CSS files in the package.js script section, as follows:-

{
  "name": "sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "node-sass --include-path scss scss/main.scss   /css/main.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^3.8.0",
    "nodemon": "^1.9.2"
  }
}

Above, I have mentioned that the CSS code in scss directory and final CSS code is in CSS directory.

So, create two directories in parallel of package.json: 1. scss and 2. CSS

5. Create a simple scss file in scss directory, as follows:-
 

$backgroundColor: #bada55;

body {
  margin: 0;
  background-color: $backgroundColor;
}

6. Compiling the .scss:

npm run build-css

7. It will finally generate css and place the file in css directory, the final css code will look like this:

body {
  margin: 0;
  background-color: #bada55; }