Sass Preprocessing

CSS is enough to handle a simple stylesheet but if the stylesheets are larger and more complex, they are harder to maintain. Preprocessor can help in this case. Sass provides some extended features that are not available in CSS like variables, nesting, mixins, inheritance and other nifty goodies that make it compatible to handle all type of stylesheets.

When you start working with Sass, it will take your preprocessed Sass file and save it as a simple CSS file which is later used in your webpage.

Once you install sass, you can watch either individual file or entire directories with the --watch flag. See the syntax of running Sass while watching an entire directory.

Syntax:

Create a simple HTML file having the following code:

See this example:

Create a SCSS file named "style.scss" having the following code:

Put the both file inside the root folder.

Now, execute the following code: --watch style.scss:style.css

It will create a normal CSS file named ?style.css? in the same directory automatically. For example:

Now, execute the above html file, it will read the CSS value.

Output: