Sass (Syntactically Awesome Stylesheets) is an excellent CSS pre-processor tool. It allows us to make variables, nested syntax, operations, mixins, loops, functions and imports that make writing CSS much more powerful.

The downfall to Sass is it's technical barrier to entry for many of us to get setup and running. There are so many ways to configuring Sass that the most minimal configuration gets easily overlooked. Let's see how we can get setup with Sass in three easy steps.

  1. You simply need a css folder with a style.css file and a scss folder with a style.scss file.

  2. Open the terminal anywhere and install Sass on your machine globally by running:
    npm install -g sass

  3. Open terminal in your assets folder where your scss and css folders are and run:
    sass --watch scss:css

Thats it! Now make your style.scss updates and Sass will compiled your changes from scss\style.scss to css\style.css.

Resources