What are CSS preprocessors?

Why do we use CSS Preprocessors?

A CSS Preprocessor is a highly valuable tool for full-stack developers and frontend developers who work on huge projects. It makes code more readable and easy to distribute.

Some most popular CSS preprocessors:

• SASS
• LESS

SASS:

The SASS full form is Syntactically Awesome Style Sheets, SASS is stylesheet language. when SASS compiled to CSS. SASS allows using their variable, nested rules, mixins, functions, etc. these all are fully compatible with CSS syntax. SASS makes it easy to share the design of projects and it keeps well-organized large size stylesheets.

LESS:

The LESS full form is Leaner Style Sheets.LESS is a backward-compatible language extension for CSS.using a javascript tool to convert LESS style to CSS style.

CSS Preprocessor in Action:

Variables :

Variables are commonly used in any programming language, which especially lacking in CSS. By having variables at your disposal, you may define a var once, and reuse its value across the entire program… if you made a variable for any CSS value it will be reusable in the entire program. You want to change some value in an entire program then you only change in variable and you got the changes.

$primaryColor: #000056
div{
color: $primaryColor;
}

you declared a variable once and now it’s possible to use the hall program without you don’t retype the definition.

Mixins :

Mixins are prewritten set of CSS rules and plug it inside of any CSS element’s styling. This is excellent for cutting down on repeated code.

@mixin important-note {
color: blue;
font-size: 24px;
font-weight: bold;
border: 2px solid blue;
}
div{
@include important-note;
background-color: yellow;
}

Loops :

The Loops allow you to repeat the same tasks multiple times without having to re-enroll each time.

colors = 'red' 'green' 'blue' 'yellow'
for color in colors
{'.' + color}
background: unquote(color)

loops are saved time and code to write the same code multiple times to change some value of CSS properties.

If/Else Statements :

This will run a set of orders only if a given condition is true.

@if (width(body) > 768px) {
background-color: red;
color: yellow
} else {
background-color: blue;
color: bisque;
}

Here, the background image will be changed on the width of the page’s body.

Nesting :

Devs are frustrating when they are can’t visualize nested CSS Elements, that are provided by the preprocessor.

$font-size: 12px;
div {
margin: 10px;
button {
padding: 10px 5px;
}
.name{
color: #E1E1E1
}
}

Color Functions:

Preprocessors have broad in-built functionality for altering color dynamically.

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount) 
transparentize($color, $amount)
mix($color1, $color2, [$amount])
grayscale($color)
complement($color)

Imports :

This functionality is very useful when you work on a large project and import multiple CSS files.

@import "style/style.scss";
@import "style.css";

Math :

Arithmetic operations are allowed in the CSS Preprocessor without the use of the calc() function.

.favourite {
width: (100vw / 4);
}

Extends :

You make a list of CSS rules and you want to style another element, just use extend keyword and fully style their elements.

.favourite-div {
color:white;
background-color: blue;
margin: 10px;
}
.another-div {
@extend .favourite-div ;
border: 3px solid green; 
}

Reference for CSS Preprocessors :

https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor