Já vimos em alguns artigos aqui no blog o quanto o Sass pode ser útil e o quanto ele pode auxiliar no processo de desenvolvimento das folhas de estilo do seu site. Por isso, decidi mostrar nesse artigo mais um recurso muito útil do Sass: a criação de módulos.
O que são módulos?
Primeiramente, 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 muito bom, portanto, para evitar que você precise digitar o mesmo código em diferentes arquivos.
Geralmente esse recurso é muito útil quando você tem uma aplicação com várias páginas, e elas tem tanto formatações gerais quanto formatações específicas para uma determinada página.
Criando os módulos
E como criar esses módulos?
Um módulo não possui nenhuma diferença significativa de um arquivo Sass comum.
Sendo assim, você pode utilizar neste arquivo todos os recursos que já utiliza no Sass normalmente.
Após criar o arquivo com os estilos que quer reutilizar, basta importar o arquivo que você criou em outro arquivo Sass.
O código abaixo é um exemplo de módulo:
$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.
Neste arquivo, utilizaremos @use para utilizar um módulo, e, então especificaremos o nome do arquivo que queremos utilizar como módulo.
Sendo assim, podemos também utilizar variáveis, mixins e funções definidas no módulo especificando o nome do arquivo. Veja o exemplo 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
A sintaxe de acesso aos elementos do módulo se assemelha à sintaxe de acesso à propriedades de objetos do JavaScript.
No entanto, a forma de acesso as variáveis, mixins e funções ainda é a sintaxe padrão do Sass, tanto que usamos o @include na chamada do mixin.
Para este exemplo, a compilação pode ser feita através do segundo arquivo. Sendo assim, vamos supor que o segundo código que mostrei aqui pertence a um arquivo chamado pagina1.sass.
Desta forma, o comando sass --watch pagina1.sass pagina1.css já serve para que o arquivo CSS contendo o código que será utilizado pela página web seja gerado corretamente.
Considerações finais
Neste artigo vimos como criar um módulo utilizando Sass, bem como utilizar esse recurso que pode facilitar muito o processo de desenvolvimento da sua aplicação web.
