Aula 1 — O que é SCSS e por que usar

Depois de dominar HTML e CSS, surge uma pergunta natural: como manter tudo organizado quando o projeto cresce?

É exatamente nesse ponto que o SCSS entra em cena — não como substituto do CSS, mas como um aliado de produtividade.

Antes de tudo: o que é SCSS?

SCSS é uma sintaxe do Sass, que por sua vez é um pré-processador de CSS.

Na prática, isso significa:

• Você escreve SCSS
• Uma ferramenta converte esse código em CSS
• O navegador recebe apenas o CSS final

SCSS não é uma nova linguagem

Um ponto muito importante:

SCSS não substitui o CSS. Ele apenas adiciona recursos para facilitar escrita, organização e manutenção.

Todo CSS válido também é um SCSS válido:

 .card { padding: 16px; border: 1px solid #ccc; } 

Esse código funciona exatamente igual em CSS ou SCSS.

Por que o SCSS foi criado?

Em projetos pequenos, o CSS puro funciona muito bem.

Mas conforme o projeto cresce, surgem problemas comuns:

• Muitas cores repetidas
• Arquivos enormes
• Dificuldade de reaproveitar estilos
• Manutenção cada vez mais lenta

O SCSS surgiu para resolver esses pontos, trazendo recursos que o CSS tradicional não tinha na época.

O que o SCSS adiciona ao CSS?

Sem entrar em detalhes técnicos ainda, o SCSS permite:

• Variáveis (cores, tamanhos, espaçamentos)
• Aninhamento de seletores
• Separação do código em arquivos menores
• Reaproveitamento de blocos de estilo

CSS puro ainda é importante?

Sim. Muito.

SCSS só faz sentido para quem já entende:

• Seletores
• Especificidade
• Box Model
• Layout e responsividade

Ele apenas organiza melhor um CSS que já é bom.

Quando faz sentido usar SCSS?

SCSS é especialmente útil quando:

• O projeto tem muitos componentes
• O CSS começa a crescer demais
• Existe repetição de estilos
• Há mais de uma pessoa mexendo no código

Em projetos muito pequenos, o CSS puro costuma ser suficiente.

SCSS no mercado

SCSS é amplamente utilizado em projetos profissionais, especialmente em:

• Design systems
• Projetos grandes
• Frameworks CSS

Mesmo quando o projeto final entrega apenas CSS, o desenvolvimento costuma acontecer em SCSS.

O papel deste mini-curso

Este mini-curso não tem como objetivo ensinar “mais CSS”.

O objetivo é mostrar:

• Como escrever CSS de forma mais organizada
• Como reaproveitar estilos
• Como trabalhar melhor em projetos maiores

Na próxima aula, vamos aprender os dois recursos mais usados do SCSS: variáveis e nesting 🌿✨