Artigo original: How to Use Sass with CSS Modules in Next.js
O Next.js nos fornece os módulos do CSS por padrão, garantindo benefícios como estilos dentro de escopos e o desenvolvimento focado em nosso app. Como podemos dar superpoderes ao nosso CSS no Next.js com o Sass?
- O que são módulos do CSS?
- O que é Sass?
- O que vamos criar?
- Passo 0: criar um novo app com o Next.js
- Passo 1: instalar o Sass em um app com o Next.js
- Passo 2: importar arquivos Sass em um app com o Next.js
- Passo 3: usar as variáveis do Sass em um app com o Next.js
- Passo 4: usar os mixins do Sass com as importações globais no Next.js
O que são módulos do CSS?
Os módulos do CSS são, essencialmente, arquivos CSS que, ao serem importados para projetos em JavaScript, fornecem estilos com escopo para aquela parte específica do projeto por padrão.
Ao importar seu módulo, as classes são representadas por um objeto mapeado com cada nome de classe, o que permite a você aplicar aquela classe diretamente em seu projeto.
Por exemplo, se tivéssemos um módulo de CSS para o título da minha página:
.title {
color: blueviolet;
}Se eu o importasse em meu projeto com React:
import styles from './my-styles.css'Eu, então, poderia aplicar aquele título diretamente a uma elemento como se ele fosse uma string:
<h1 className={styles.title}>My Title</h1>Ao colocar os estilos em escopo, não é mais necessário se preocupar com quebrar outras partes da aplicação com estilos em cascata. Também fica mais fácil gerenciar pequenas partes do código que pertencem a uma parte específica da aplicação.
O que é Sass?
Sass é uma extensão da linguagem CSS que fornece recursos importantes, como variáveis, funções e outras operações que permitem que você crie recursos complexos em seu projeto mais facilmente.
Como exemplo, se eu quisesse armazenar minha cor acima em uma variável para que eu a pudesse alterar facilmente mais tarde, seria possível adicionar o seguinte:
$color-primary: blueviolet;
.title {
color: $color-primary;
}Se eu quisesse alterar aquela cor, mas apenas em UM local, eu poderia usar as funções integradas de cor para alterar a tonalidade:
$color-primary: blueviolet;
.title {
color: $color-primary;
border-bottom: solid 2px darken($color-primary, 10);
}Um outro benefício é a capacidade de aninhar estilos. Isso permite uma organização mais fácil e mais lógica do CSS.
Por exemplo, se eu quisesse apenas alterar um elemento <strong> aninhado em um título, eu poderia adicionar:
$color-primary: blueviolet;
$color-secondary: cyan;
.title {
color: $color-primary;
border-bottom: solid 2px darken($color-primary, 10);
strong {
color: $color-secondary;
}
}O que vamos criar?
Vamos criar um novo app em React usando o Next.js.
Com nosso novo app, aprenderemos a instalar e a configurar o Sass para podermos tirar vantagem de seus recursos dentro do Next.js.
Depois de configurar o Sass, examinaremos como usar as variáveis e os mixins do Sass para recriar alguns dos elementos padrão da UI do Next.js.
Quer pular o tutorial e ir direto para o código? Confira Next.js Sass Starter no GitHub.
Passo 0: criar um novo app com o Next.js
Para iniciar um novo app com o Next.js, podemos usar Create Next App.
Em seu terminal, navegue até o local onde você quer criar o novo projeto e execute o seguinte comando:
yarn create next-app my-next-sass-appObservação: você pode usar o npm em vez do yarn para qualquer exemplo de instalação e de gerenciamento de pacotes deste tutorial.
Quando a instalação terminar, você pode navegar até o diretório e iniciar seu servidor de desenvolvimento:
yarn devIsso iniciará seu novo projeto do Next.js em http://localhost:3000!
Se essa é a sua primeira vez criando um app com o Next.js, dê uma olhada no projeto! Ele já vem com uma página inicial básica e com dois arquivos CSS:
/styles/globals.css/styles/Home.module.css
Aqui, nos concentraremos no arquivo Home. Se você examinar pages/index.js, verá que estamos importando o arquivo Home, o que torna esses estilos disponíveis.
O Next.js tem os módulos do CSS incorporados por padrão. Isso quer dizer que, quando importamos nosso arquivo Home com os estilos, as classes do CSS são adicionadas ao objeto styles. Aplicamos, então, cada um desses nomes de classe aos elementos do React a partir desse objeto. Por exemplo:
<h1 className={styles.title}>Ou seja, nossos estilos estão dentro do escopo daquela página.
Para saber mais sobre os módulos do CSS ou sobre o suporte integrado no Next.js, confira os recursos abaixo (em inglês):
- https://github.com/css-modules/css-modules
- https://nextjs.org/docs/basic-features/built-in-css-support
Passo 1: instalar o Sass em um app com o Next.js
Embora o Next.js venha com um bom suporte integrado do CSS, ele não vem com o Sass completamente integrado.
Por sorte, para deixar o Sass pronto para ser utilizado em nosso app com o Next.js, tudo que precisamos fazer é instalar o pacote do Sass usando o npm ou o yarn, o que permitirá ao Next.js incluir esses arquivos em seu pipeline.
Para instalar o Sass, execute o seguinte comando em seu projeto:
yarn add sassSe recomeçarmos nosso servidor de desenvolvimento e se recarregarmos a página, perceberemos que nada aconteceu ainda, e isso é bom!
Em seguida, aprenderemos a aproveitar os superpoderes do nosso CSS.
Siga junto comigo usando este commit!
Passo 2: importar arquivos Sass em um app com o Next.js
Agora que o Sass está instalado, estamos prontos para usá-lo.
Para usar recursos específicos do Sass, no entanto, precisaremos usar os arquivos Sass com a extensão .sass ou .scss. Para este tutorial, usaremos a sintaxe SCSS e a extensão .scss.
Para começar, em pages/index.js, altere a importação do objeto styles na parte superior da página para:
import styles from '../styles/Home.module.scss'Quando a página for recarregada, como seria de se esperar, teremos problemas ao carregá-la.
Para resolver isso, renomeie o arquivo:
/styles/Home.module.csspara
/styles/Home.module.scssA diferença é a troca da extensão de arquivo de .css para .scss.
Quando a página for recarregada, veremos nosso site do Next.js carregando e de volta à ativa!
Observação: não trataremos de estilos globais aqui – você pode fazer a mesma coisa renomeando o arquivo de estilos globais e atualizando a importação em /pages/_app.js
Em seguida, aprenderemos como usar os recursos do Sass em nosso app com Next.js.
Siga junto comigo usando este commit!
Passo 3: usar as variáveis do Sass em um app com o Next.js
Agora que estamos usando o Sass em nosso projeto, podemos começar a usar alguns de seus recursos básicos, como as variáveis.
Para mostrar como isso funciona, vamos atualizar a cor azul em nosso app com minha cor preferida, o roxo!
Na parte superior de /styles/Home.module.css, adicione o seguinte:
$color-primary: #0070f3; A cor #0070f3 é o que o Next.js usa por padrão no app.
Em seguida, atualizaremos cada local que usa essa cor no arquivo CSS da nossa página inicial com nossas novas variáveis. Por exemplo, vamos alterar o seguinte:
.title a {
color: #0070f3;por
.title a {
color: $color-primary;Se atualizarmos a página, nada deve ter mudado.
Agora, contudo, como estamos usando uma variável para definir a cor, podemos facilmente alterá-la.
Na parte superior da página, altere a variável $color-primary colocando purple ou a cor que desejar:
$color-primary: blueviolet;Quando a página for recarregada, veremos que nossa cor agora é roxa!
Variáveis são apenas o começo dos superpoderes que o Sass dá ao nosso CSS, mas podemos ver que elas nos permitem gerenciar com facilidade nossas cores ou outros valores por toda nossa aplicação.
Siga junto comigo usando este commit!
Passo 4: usar os mixins do Sass com as importações globais no Next.js
Um dos vários recursos do Sass são os mixins. Eles nos dão a capacidade de criar definições semelhantes a funções, nos permitindo configurar regras que podemos repetir e usar em toda a nossa aplicação.
Em nosso exemplo, vamos criar um mixin que nos permite utilizar estilos responsivos a partir de media queries para toda a aplicação. Embora já possamos fazer isso somente com as media queries, usar um mixin nos permite uma única definição, mantendo a consistência e permitindo que gerenciemos a definição responsiva em um único lugar.
Como esse mixin é algo que queremos usar em toda a nossa aplicação, também usaremos outro recurso do Sass, que é a capacidade de importar arquivos.
Para começar, criamos um novo arquivo no diretório /styles:
/styles/_mixins.scssEstamos usando uma sublinha na frente do nome do arquivo para fazer entender que ele é uma parcial.
Em seguida, dentro de nosso arquivo /styles/Home.module.scss, vamos importar o novo arquivo:
@import "mixins";Ao recarregar a página, veremos que nada mudou.
Se olharmos na parte inferior de Home.module.scss, veremos que estamos usando uma media query para tornar a classe .grid responsiva. Usaremos isso como base para o nosso mixin.
Em _mixins.scss, adicione o seguinte:
@mixin desktop() {
@media (max-width: 600px) {
@content;
}
}Observação: embora provavelmente pudéssemos chegar a um nome melhor para este mixin em vez de desktop, usaremos este nome como a base para o nosso exemplo.
@content representa o fato de que, cada vez que usarmos nosso mixin desktop, ele incluirá o conteúdo aninhado naquele local.
Para testar isso, no arquivo Home.module.css, vamos atualizar o trecho sobre a classe .grid:
@include desktop() {
.grid {
width: 100%;
flex-direction: column;
}
}Se abrirmos novamente a nossa aplicação e se encolhermos a janela do navegador, veremos que ainda temos nossos estilos responsivos!
Podemos ir um pouco mais longe. O Sass permite aninhar estilos. Por exemplo, em vez de escrever:
.footer {
// Styles
}
.footer img {
margin-left: 0.5rem;
}Podemos incluir aquela definição do img diretamente na definição original de .footer:
.footer {
// Styles
img {
margin-left: 0.5rem;
}
}Aquela definição de img compilará em .footer img, da mesma forma como se estivesse escrita em CSS padrão.
Tendo isso em mente, podemos usar o mesmo conceito e mover nosso mixin desktop para nossa classe .grid original:
.grid {
@include desktop() {
width: 100%;
flex-direction: column;
}
}Se perceber, como já estamos dentro da classe .grid, podemos removê-la do mixin, pois ela já será aplicada.
Isso permite uma organização mais fácil de nossos estilos responsivos.
Por fim, se olharmos novamente para nossa aplicação, perceberemos que, ainda, nada mudou, o que significa que usamos com sucesso nosso mixin do Sass.
Siga junto comigo usando este commit!
O que mais podemos fazer com o Sass e o Next.js?
Estamos apenas começando com o Sass aqui. Como nossos módulos de CSS têm agora o poder do Sass, há milhares de habilidades que não vêm por padrão com o CSS e que podemos usar.
Funções de cores
O Sass tem inúmeras funções integradas que permitem manipular cores, unir e combinar tonalidades com muito mais facilidade.
Duas delas que eu uso com frequência são darken e lighten (escurecer e clarear, respectivamente), que permite a você escolher uma cor e mudar a sua tonalidade .
Saiba mais sobre todas as funções de cores disponíveis no Sass (texto em inglês).
Funções personalizadas
Embora os mixins se pareçam com funções, podemos definir funções de verdade no Sass que nos permitem realizar operações complexas e produzir valores com base em uma entrada.
Saiba mais sobre funções personalizadas no Sass (texto em inglês).
Outros tipos de valores
Embora, na maioria das vezes com o CSS, usemos strings ou números, vimos que uma extensão simples disso é a capacidade de usar variáveis.
Além das variáveis, o Sass nos dá mais tipos de valores, como os mapas, que funcionam como um objeto, e as listas, que são algo como arrays (textos explicativos em inglês).
Saiba mais sobre os tipos de valores no Sass (texto em inglês).
Mais
Existem centenas de recursos disponíveis no Sass e vários artigos que tratam dos recursos mais usados. Aproveite o tempo para explorar a documentação e descubra o que há por lá!
