Solucionado
Boa noite, Estou gostando bastante do curso :), porém fiquei com uma dúvida na parte do reaproveitamento do código. Qual a real vantagem do Sass comparado ao exemplo abaixo utilizando classes?
.bg-color-black{ background : #000;}
.font-color-white{ color: #fff;}
.font-size-16{ font-size 1em;}
<div class='bg-color-black'>
<p class='font-color-white font-size-16'>Teste</p>
</div>Não fica mais fácil criar classes e aplicar diretamente no elementos do HTML?
Obrigado.
Oi Bruno,
Fica mais fácil com certeza!
Problema de nomear classes dessa forma é que você está atrelando esse nome ao que ele tem, e não o que ele representa.
Imagine que para toda propriedade/valor CSS tivesse uma classe relacionada, como que seu HTML ficaria? Algo que deveria ser voltado para estrutura e conteúdo (HTML) acaba se tornando responsável pelo estilo também, como se estivesse misturando responsabilidades.
E acaba engessando mudanças também. Por exemplo, pensando que a classe .coluna-esquerda depois de um tempo precisa ser colocada na direita. Aí você ou deixa o nome assim mesmo, mas perde totalmente no significado da classe, ou você vai ter um trabalhão pra alterar a classe e seu HTML.
Quando você faz um CSS modula (ou componetizado) essa prática se torna nula praticamente.
Por isso o Bootstrap não usa classes como btn-BLUE, e sim btn-PRIMARY, para não atrelar as coisas da forma que você comentou.
Agora com relação a sua pergunta, num cenário que você tem um CSS cheio de classes como as mencionadas por você, você pode juntá-las em uma grande classe chamada .paragrafo ou .cabecalho por exemplo.
Fico feliz que esteja curtindo o curso! :)
Espero ter ajudado,
Abcs!