i want to know about the css preprocessor,
1 Like
CSS Preprocessors are increasingly becoming a mainstay in the workflow of front-end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make its usage easier, developers often turn to use preprocessors such as SASS or LESS.
CSS Preprocessors compile the code which is written using a special compiler. They then use that to create a CSS file, which can then be referenced by the main HTML document.
When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place. The good thing is you also have more options available to you. Some, such as SASS, have specific style standards which are meant to make the writing of the document even easier, such as the freedom to omit braces if you want.
Of course, CSS Preprocessors also offer other features as well. Many of the features offered are incredibly similar across preprocessors, with only slight variances in syntax. Thus, you can choose pretty much anyone you wish, and you will be able to achieve the same things. Some of the more useful features are:
Variables
One of the most commonly used items in any programming language is the variable, something which CSS notably lacks. By having variables at your disposal, you may define a value once, and reuse if throughout the entire program. An example of this in SASS would be:
$yourcolor: #000056
.yourDiv {
color: $yourcolor;
}
By declaring the SASS yourcolor variable once, it is now possible to reuse this same exact color throughout the entire document without ever having to retype the definition.
Loops
Another common item in languages are loops, something else CSS lacks. Loops can be used to repeat the same instructions multiple times without having to be reentered multiple times. An example with SASS would be:
@for $vfoo 35px to 85px {
.margin-#{vfoo} {
margin: $vfoo 10px;
}
}
This loop saves us from having the to write the same code multiple times to change the margin size.