I’ll share what I know and some sources on the subject.
What exactly do they do?
LESS
, SASS
and SCSS
are extensions of CSS
, I mean, in a very simple way, they add functionality to the CSS.
Taking the context of Web development, we can think about how the TypeScript
is for the Javascript
, adds new features, without breaking compatibility, ie,
at the end the code is compiled, or converted to a standard version. So do these CSS preprocessors.
A more functional example helps to understand.
Scenario 1, repeated contents throughout the CSS. It is common for the company to provide the color palette and colors to be set to this standard.
Then the same RGB appears several times in the CSS. Or the font name, and so on. When you need to find the colors, you have to go to the search, and when you want to change for example, you have to change the whole code. If you had a basic programming language functionality in CSS, which are the variables, this would be easily solved.
Example:
.estilo1 {
background-color: #fafafa; /* uma cor padrão */
font: Helvetica, sans-serif
}
.estilo3 {
color: #fafafa
}
.estilo4 {
background-color: #fafafa; /* novamente, de uma maneira que foi inevitável não duplicar...*/
font: Helvetica, sans-serif
}
Now it wouldn’t be easier to visualize and change if it were something like that:
$cor-padrao: #fafafa
$font-padrao: Helvetica, sans-serif;
.estilo1 {
background-color: $cor-padrao;
font: $font-padrao
}
.estilo3 {
color: $cor-padrao
}
.estilo4 {
background-color: $cor-padrao;
font: $font-padrao;
}
This second code after processed, will be generated equal to the first, not causing incompatibility with the browsers.
This is a simple example, but you can get an idea of how easy it can be to do certain things, make the code clear, and also simpler to maintain, could change the default color only in the variable and all the CSS code would already be reflecting the change.
Another good example is the resource of Mixins, that allows you to reuse a part of CSS, as if it were a Function. See this example:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Source: https://sass-lang.com/guide
In which cases it would be useful to use them instead of conventional CSS?
Well, I could say everyone. Every time you have an extension, as you dominate you start to use more, then you start to notice more options where it can be useful.
It is possible to write a code 100% in in preprocessor, and, as it dominates the features, it implements, which makes the learning curve smooth.
Wouldn’t hurt the page’s performance instead of using normal CSS since it would be an extra process or the cost x benefit is worth it?
Since the code can be compiled and delivered as a normal CSS, there is no incompatibility the cost would be to wait a few seconds (not enough, but if it comes...) only at the time of assembling the package to publish, I do not think it is too much trouble.
Some Ides also allow you to compile the code while it is being saved, which makes the process even simpler and transparent.
Here is a link with another very simple explanation about the resources: tableless.com.br/Sass-an-other-way-of-writing-css