Benefits of Using CSS Preprocessors like SASS

In web development, it is impossible to implement professional mockups without the use of HTML and CSS. If the markup language allows us to make the template from the required elements, CSS will convert this template to the desired form, as in the original mockup.

It would seem, with the help of pure CSS, you can make the page the way your customer wanted to see it. However, if someone opens your only CSS file and tries to correct something, are you sure that the code will be readable, editable, structured and understandable? If your project is huge, consists of many parts, are you sure that you can easily support it in the future? If you use a CSS preprocessor, then the answer is yes. Why? Now we'll find out.

What is a CSS preprocessor?

In my understanding, this is an add-on for the standard CSS that extends the standard features, adds some functions and allows you to write more readable and easy-to-understand code. At the output, the source code is compiled into the familiar CSS.

The use of such a tool in modern development is "must have", and I advise every web designer or developer to familiarize himself with it. There are a lot of CSS preprocessors, but we should highlight the most popular ones:
- SASS
- LESS
- Stylus

All of the above preprocessors have almost identical functionality, there are only small differences in the syntax.

Now, let's return to the question, what advantages do preprocessors give us, in order to make our code more convenient and supported?

First of all is a hierarchy. This feature allows us to structure elements, easily find the parent of the element, quickly write pseudo-classes and pseudo-elements and even use BEM. For example:

.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

Look at this piece of code written in Sass. All this is converted to the following CSS:

.track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}

Laconic, convenient, understandable, the structure from the parent to the child is great, is not it?
The second advantage is the variables. The principle of their work is extremely simple: the name of the variable begins with the symbol $ and then the name itself. Through the colon we write a value - this can be a color in any convenient form, the values of indentation, width, font size and so on. In the end, we get something like:

$btn-color: blue;
$font-main-size: 16px;

In the general structure it will look like this:

.block {
font-size: $font-main-size;
}

Just imagine how convenient it is. If you need to change the color of the buttons throughout the site, then it's enough to do just one place!

Third, and the biggest thing that CSS-preprocessors can offer us is the use of mixin. In the usual sense for us, mixins are functions that can be used several times without repeating the same parts of the code, remember one of the programming principles - DRY ("Do not repeat yourself").

To be honest, I do not use mixins so often, there was not such an urgent need, but I will show some examples. One of the functions most used by me has the following form:

@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}

@if (unitless($context)) {
$context: $context * 1px;
}

@return $pixels / $context * 1em;
}

In general, the code will look like this:

body {
font-size: em(14px);
}

Yes, as you understand, this is just a conversion of the font size from PX to Em. The following example also saves a lot of time:

@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

The code will look like this:

input, textarea {
@include input-placeholder {
color: $grey;
}
}

There are many examples, however, you should start using mixins yourself to understand how useful this tool is.

Maybe there is one more reason that will make you like CSS preprocessors, and its name is modularity. Right now 2018, and modularity we have everywhere - from HTML-templating to various frameworks and project collectors. Preprocessors here also don't lag behind. You have the ability to include files and organize the styles of your project, as you please. In a separate file, you can store variables, in another - media queries, in the third - fonts and so on. Also, preprocessors work very well with other programming languages.

Conclusions

CSS preprocessors are an indispensable thing for every web designer or high-quality developer. All of the above advantages will greatly simplify and speed up the creation of the HTML pages, as well as make your code more understandable and structured not only for yourself but also for colleagues. I hope that after reading this article, you have no doubt about the use of CSS preprocessors.