• Register
100 points
5 1

This statement is true.A preprocessor is an abstraction layer which is built on top of CSS.Cascading style sheets is something you can say that cumbersome or  hard language ,every time you think that you are an idiot even after learning the basics of CSS.To decrease its weird level,developers made preprocessors which make the CSS more understandable and readable.For this preprocessors came to picture of CSS.Preprocessors enhances the functionality of CSS by providing powerful features like variables,classes which is known as “extends”,functions which is known as”mixins selector”,inheritance,nesting selector etc.These processors complie the code and after that complied code creates CSS which can be include in main HTML page.

Please note that here preprocessor here own unique styling syntax.There are pre-defined standards which makes you CSS coding a lot of easier like in SASS ,it get you rid of braces.We defined the preprocessor on top of CSS so that it includes its own styling first and then generates CSS.It is obviously a abstraction layer because it hides the things that how is this happening.It processess the things and generate CSS which give us a feeling that something is happening inside which gives desired result.

Examples of preprocessors:SASS,LESS,Stylus,PostCss etc.

SASS Code

/*Sass*/

$primary-color: blue
$primary-bg: cherry

body
  color: $primary-color
  background: $primary-bg

Complied CSS Code

/* Compiled CSS  from SASS*/

body {
  color:blue;
  background: cherry;
}

The above code declares two variables: $primary-color and $primary-bg and applies them to the body tag of HTML element.

When you saved the file,the extension of file should be in .sass format.