Preprocessor

A preprocessor is a program that takes one type of data and converts it to another type of data.

CSS preprocessor

CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.

Mainly using CSS preprocessor

1. Less
2. Sass

Sass (Syntactically Awesome StyleSheets)

Sass (Syntactically Awesome StyleSheets) is a CSS pre-processor, that extends the CSS language by adding features like variables, mixins, functions, nested rules, selector inheritance.

Sass has two syntaxes.

Scss (Sassy ) – In scss we use brackets and semicolons and the extension is .scss .

Sass - In sass we follow the indentation of lines and the extension is .sass.

Installation

1. npm install gulp-angular2-embed-sass --save-dev
2. npm install gulp
3. npm install
4. npm start -- --scss