Como usar o Sass no Next?

Neste artigo, vamos explorar como integrar Sass em projetos Next.js, aproveitando seus recursos avançados enquanto mantemos a modularidade e escopo local do CSS.

O que é Sass?

Sass (Syntactically Awesome Style Sheets) é um pré-processador CSS que adiciona recursos poderosos como:

• Variáveis para valores reutilizáveis
• Aninhamento de seletores
• Mixins e funções
• Modularização com imports
• Operações matemáticas

No Next.js, podemos usar Sass combinado com CSS Modules para obter o melhor dos dois mundos.

Configuração Básica

Para começar a usar Sass no Next.js, siga estes passos:

1. Instale o pacote Sass:

   1npm install sass

2. Crie arquivos com extensão .module.scss (para CSS Modules com Sass)
3. Importe os estilos como faria com CSS Modules normais

Estrutura de Projeto Recomendada

1src/ components/ Card/ index.tsx styles.module.scss styles/ _variables.scss _mixins.scss

Esta estrutura permite:

• Manter estilos específicos de componentes localizados
• Compartilhar variáveis e mixins entre componentes
• Manter uma organização clara e escalável

Exemplo Prático: Criando um Card

Vamos implementar um componente Card com estilos em Sass:

1. Arquivo de Variáveis (_variables.scss)

1$primary-color: #3498db; $border-radius: 8px; $transition-speed: 0.3s;

2. Estilos do Card (styles.module.scss)

1@import "../../styles/variables";
2 .card {
3 padding: 1rem;
4 border: 2px solid #eee;
5 border-radius: $border-radius;
6 transition: all $transition-speed ease;
7 h2 { font-size: 1.5rem;
8 margin-bottom: 0.5rem;
9 }
10 p { font-size: 1rem;
11 color: #666;
12 }
13 &:hover {
14 border-color: $primary-color;
15 color: $primary-color;
16 p {
17 color: inherit;
18 } } }

3. Componente React (index.tsx)

1import styles from "./styles.module.scss";
2 interface CardProps {
3 children: React.ReactNode; }
4 export function Card({ children }: CardProps) {
5 return <div className={styles.card}>{children}</div>; }

Vantagens da Abordagem

Combinar Sass com CSS Modules no Next.js oferece:

• Escopo local: Evita conflitos de nomes de classes
• Produtividade: Sintaxe mais limpa e poderosa
• Manutenibilidade: Código mais organizado e reutilizável
• Performance: Next.js otimiza o CSS resultante
• Compatibilidade: Funciona com Server Components

Considerações Finais

Integrar Sass ao Next.js é simples e traz benefícios significativos:

1. Comece pequeno: Adicione Sass gradualmente ao seu projeto
2. Organize seus estilos: Crie um sistema de design com variáveis e mixins
3. Aproveite os módulos: Mantenha o escopo local dos estilos
4. Explore recursos avançados: Como herança com @extend e funções

Para projetos maiores, considere:

• Implementar um sistema de design com tokens
• Criar mixins para media queries responsivas
• Automatizar prefixos de vendor com autoprefixer
• Usar source maps para depuração

Sass no Next.js permite escrever estilos mais expressivos e mantáveis, enquanto aproveita toda a potência do ecossistema Next.js para performance e renderização otimizada.