Why use sass and scss preprocessors now?

Question

css

I decided to get acquainted with these preprocessors and did not understand at all why I need to study them now...
Maybe there are some examples where it is better to use scss rather than css?

Answer 1

Look at bootstrap.
A single variables.scss file allows you to flexibly customize the entire framework.
Styles are structured.
These are two main advantages: centralized management and code organization.
Further, quite a few popular components and plugins come with scss/less sources. If you need customization (and such a need is almost always present), you can go three ways:
1. Copy the style file to yourself and rewrite it
2. Include the original styles and reassign the selectors in your table.
3. Connect sources and only reassign variables
Another case:
We take some large framework, let it be the same bootstrap. We do not need half of the components in it.
We can again include the entire original file with extra styles. Or we can take the source code and include only what we need in the assembly. If tomorrow we need another component, we simply uncomment the line with its connection.
More:
We need to set the sizes in rem.
We can go the wrong way: assign a font-size: 10px to the root and easily calculate the rhemes in our mind. But you shouldn't set pixels for html.
Or we can write the toRem() function in the preprocessor and use it.
Not to mention more complex calculations.
Or bulky ones.
For example: https://codepen.io/delphinpro/pen/QvLZxg?editors=0100
Look at line 62 in the styles. 60 selectors are generated there. Will it be convenient to write this in bare CSS?
I can still write, but time is precious.

Answer 2

from what is useful - mixins, more convenient syntax (for example, such things as &.active, &:hover, &:focus and other work with & are very convenient), small utilities by type @extend @include @import, nesting.
and variables yes. css variables have already become cooler

Answer 3

Well, imagine your customer decided to make a blue one instead of a pink color scheme. In scss you just change the variable and everything is calculated.

Answer 4

Of the advantages of preprocessors, there are variables and norms. JS-like syntax