Vou compartilhar o que conheço e algumas fontes sobre o assunto.
O que elas fazem exatamente?
LESS
, SASS
e SCSS
são extensões do CSS
, ou seja, de uma maneira bem simples, adicionam funcionalidades ao CSS.
Pegando o contexto de desenvolvimento Web, podemos pensar em como o TypeScript
é para o Javascript
, adiciona novas funcionalidades, sem quebrar a compatibilidade, ou seja,
no final o código é compilado, ou convertido para uma versão padrão. Assim também fazem esses pré-processadores de CSS.
Um exemplo mais funcional ajuda a entender.
Cenário 1, conteúdos repetidos ao longo do CSS. É comum a empresa fornecer a paleta de cores e as cores serem definidas segundo esse padrão.
Então o mesmo RGB aparece várias vezes no CSS. Ou o nome de das fontes, e por ai vai. Quando precisa achar as cores, tem que recorrer ao buscar, e quando quer mudar por exemplo, tem que sair trocando no código todo. Se tivesse uma funcionalidade básica de linguagem de programação no CSS, que são as variáveis, isso seria facilmente resolvido.
Exemplo:
.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
}
Agora não seria mais fácil de visualizar e alterar se fosse algo assim:
$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;
}
Esse segundo código após processado, será gerado igual ao primeiro, não causando incompatibilidade com os navegadores.
Esse é um exemplo simples, mas que dá pra ter ideia de como pode ser fácil fazer certas coisas, deixar o código claro, e também mais simples de dar manutenção, poderia alterar a cor padrão apenas na variável e todo o código CSS já estaria refletindo a alteração.
Outro bom exemplo é o recurso de Mixins, que permite reutilizar uma parte do CSS, como se fosse uma function. Veja esse exemplo:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Fonte: https://sass-lang.com/guide
Em quais casos seria útil usá-las no lugar de CSS convencional?
Bom, poderia dizer que todos. Sempre que se tem uma extensão, à medida que você domina começa a usar mais, então começa a perceber mais opções de onde pode ser útil.
É possível escrever um código 100% em em pré-processador, e, à medida que vai dominando os recurso, vai implementando, o que faz a curva de aprendizagem suave.
Não prejudicaria a performance da página em vez de usar CSS normal já que seria um processo a mais ou o custo x benefício vale a pena?
Como o código pode ser compilado e entregue como um CSS normal, não há incompatibilidade o custo seria esperar alguns segundos (não chega a isso, mas se chegar...) só na hora de montar o pacote para publicar, não creio se seja grande empecilho.
Algumas IDEs também permitem compilar o código enquanto ele vai sendo salvo, o que deixa o processo ainda mais simples e transparente.
Aqui um link com uma outra explicação bem simples sobre os recursos: tableless.com.br/sass-um-outro-metodo-de-escrever-css