Vamos fazer outra bike animada com HTML+CSS+SCSS

O que é SCSS?

SCSS (Sassy CSS) é uma sintaxe do Sass, que é um pré-processador CSS. Ele adiciona funcionalidades poderosas que não existem no CSS puro, facilitando a escrita, manutenção e escalabilidade do código.

Com SCSS, você pode usar:

Variáveis: para armazenar valores reutilizáveis como cores, fontes e tamanhos.
Aninhamento: para organizar melhor os seletores, simulando a estrutura HTML.
Mixins: blocos de código reutilizáveis, com ou sem parâmetros, semelhantes a funções.
Herança: reutilização de estilos entre seletores com @extend.
Operações matemáticas: como somas, subtrações e divisões para gerar valores dinamicamente.

SCSS usa uma sintaxe muito parecida com o CSS tradicional, o que facilita a adoção e transição. Você continua escrevendo CSS como de costume, mas com uma série de recursos adicionais.

Como usar SCSS?

Para usar SCSS em um projeto, você precisa:

Escrever seus estilos em arquivos com extensão .scss.
Compilar esses arquivos para .css usando um compilador como o Dart Sass.
Linkar o CSS gerado no seu HTML normalmente.

Vantagens do SCSS

Facilita o reuso de código.
Ajuda na manutenção em projetos grandes.
Organiza melhor os estilos com estrutura modular.
Reduz repetição e erros.

SCSS é amplamente usado em projetos profissionais de front-end e é compatível com ferramentas modernas como Webpack, Vite, Angular, React e outros frameworks.