Web Styling using SCSS rather than CSS

When I first started down the path of CSS preprocessors I was overwhelmed by the different options (sass, less, stylus), the differences in the syntax, and most of all I had no idea how I was supposed to get started with this new approach to writing CSS.

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss

Following steps for using scss in normal website to run sass compiler:

do include the sample.css in index.html page, but don’t create the sample.css file, create sample.scss file because after sass compiler starts it auto generate the sample.css with its mapping.

1. If you use Node.js, you can also install Sass using npm by running

npm install -g sass

2. Once it done, open path in terminal of project folder having with sass installed and run:

sass --watch sample.scss

then after sass compiler starts watching the scss you are writting and updating the css on each save of scss file writeup.