Texto de: Letícia Garcez
Introdução
Neste artigo, veremos mais um recurso muito útil do pré-processador CSS Sass que é a criação de módulos. Esse recurso aumenta muito o reuso de código dentro da aplicação e também permite uma melhor divisão dos códigos.
O que são módulos?
Podemos entender os módulos do Sass como arquivos com uma série de estilos que podem ser inseridos em outros arquivos de estilo. Esse é um recurso interessante, pois evita que você precise digitar o mesmo código em diferentes arquivos diferentes.
Um uso clássico para esse recurso, é quando você tem uma aplicação com várias páginas e tem algumas formatações gerais, que devem ser utilizadas em todas as páginas, mas também possui formatações específicas para uma determinada página. Neste caso, as formatações gerais podem ser colocadas em um módulo e depois importadas nos arquivos de formatação das páginas individuais, por exemplo.
Criando os módulos
No Sass, não existe uma sintaxe específica para a criação de um módulo, e arquivos entendidos como módulos também não possuem nenhuma diferença significativa de um arquivo Sass quando pensamos em sintaxe. Sendo assim, em um módulo você pode utilizar todos os recursos que já utiliza no Sass normalmente. Um exemplo de módulo é o código abaixo:
$cor1: blue
$cor2: white
@mixin colocaPadding($numero:5px)
padding: $numero
div
display: flex
flex-direction: column
justify-content: center
justify-items: center
background-color: $cor2
color: $cor1
Agora para utilizar este módulo, precisamos de outro arquivo Sass. Neste arquivo, utilizaremos @use seguido do nome do arquivo que queremos utilizar como módulo entre aspas. Supondo que o módulo que desenvolvi estivesse em um arquivo chamado geral, o código para importação seria @use “geral”.
Uma vez que o módulo tenha sido importado, podemos utilizar variáveis, mixins e funções definidas no módulo. Para isso, é preciso especificar o nome do arquivo seguido do caractere ponto e do nome da funcionalidade que queremos importar. Por exemplo, para acessar a variável $cor1 que está no módulo geral, usaríamos geral.$cor1. Um exemplo de arquivo que importaria o módulo geral seria o arquivo abaixo:
@use "geral" /*Nome do módulo que queremos importar*/
li
background-color: geral.$cor1
color: geral.$cor2
@include geral.colocaPadding(10px)
font-family: Helvetica, sans-serif
list-style: none
margin: 10px
max-width: 100px
É importante notar aqui que além da especificação do nome do módulo na frente da feature que seria utilizada, não houve nenhuma mudança na sintaxe na forma como os mixins e variáveis são utilizados. Além disso, é importante dizer que além de variáveis, funções e mixins, os estilos definidos dentro do módulo também serão importados, então uma comparação entre a versão Sass e a versão CSS do arquivo principal resulta na imagem abaixo:
Sendo assim, é possível que você acabe optando por definir módulos apenas com variáveis, funções e mixins que podem ser importados em diversos arquivos e posteriormente eliminados no momento da transpilação para manter seus arquivos finais mais limpos.
Considerações finais
Neste artigo o quão simples é trabalhar com módulos no Sass, já que a utilização dessa funcionalidade basicamente não requer um “setup extra” quando comparamos com como utilizamos o Sass sem esses módulos.
