Texto de: Letícia Garcez
Introdução
No artigo Sass: uma introdução ao pré-processador CSS conhecemos o Sass e vimos como esta tecnologia pode facilitar o desenvolvimento de folhas de estilo CSS. Naquele artigo, o foco foi em como utilizar a criação de variáveis e o aninhamento do Sass e neste artigo, vamos explorar mais alguns recursos do Sass: as funções e mixins.
Para que servem as funções e mixins no Sass?
Os mixins do Sass tem o mesmo objetivo de funções em qualquer linguagem de programação: facilitar o reuso de código. Não é incomum que quando estamos definindo a formatação no CSS tenhamos códigos repetidos em diferentes tipos de componentes como, por exemplo, as configurações de flexbox para centralizar elementos.
Já as funções do Sass servem para criar implementações de códigos que envolvem cálculos matemáticos e são utilizadas para podermos abstrair fórmulas matemáticas e alguns comportamentos que envolvem essas fórmulas.
Exemplo de utilização de mixins
Antes de criarmos nossos mixins vamos precisar de um cenário onde eles sejam úteis, então para isso vou usar o código HTML abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./estilo.css">
<title>Document</title>
</head>
<body>
<div id="estilo-1">1</div>
<div id="estilo-2">2</div>
<div id="estilo-3">3</div>
<div id="estilo-4">4</div>
</body>
</html>
Esse código, sem nenhum tipo de formatação, nos gera apenas uma página web em branco com alguns números no canto superior esquerdo. Meu objetivo para este exemplo é que as divs possuam tamanhos diferentes e diferentes cores de fundo, e para isso vou criar dois mixins: o primeiro vai definir o tamanho da div e o segundo mixin vai fazer a formatação interna dela.
A criação de um mixin segue uma sintaxe bem simples, começando com @mixin, seguido do nome que será dado a esse mixin e os símbolos de abre e fecha parênteses onde parâmetros podem ou não ser colocados.
No código abaixo, podemos ver os dois mixins, um para o tamanho da div, que tem valores padrão para os seus parâmetros, e outro para a formatação que recebe como parâmetro apenas a cor de fundo e que realiza outras formatações padrão.
@mixin tamanho($largura:200px, $altura:200px)
width: $largura
height: $altura
@mixin formatacao($fundo)
background-color: $fundo
font-size: 8rem
text-align: center
Diferentemente do que estamos acostumados em outras linguagens, os mixins não precisam de uma cláusula de retorno. Todo o código que estiver dentro do escopo do mixin será “retornado” automaticamente.
Agora, vamos utilizar esses mixins para fazer a formatação das divs segundo seus identificadores. No código abaixo, os mixins tamanho e formatacao são utilizados, sendo que o mixin tamanho foi invocado de diferentes formas para ilustrar essas possibilidades.
body
display: flex
gap: 10px
#estilo-1
//chamada sem parâmetros, pois são opcionais
@include tamanho
@include formatacao($fundo: green )
#estilo-2
//chamada com os parâmetros largura e altura
@include tamanho(250px, 150px)
@include formatacao($fundo: red )
#estilo-3
//chamada apenas com o parâmetro largura
@include tamanho (300px)
@include formatacao($fundo: gray )
#estilo-4
//chamada com os parâmetros sendo explicitados
@include tamanho ($altura:400px, $largura:400px)
@include formatacao($fundo: blue )
Agora, basta compilar o nosso arquivo Sass para CSS com o comando sass --watch nomeArquivo.sass nomeArquivo.css e teremos o resultado abaixo:
Uma comparação entre o código Sass e o código CSS pode ser visto na imagem abaixo:
Exemplo de utilização de funções
Como as funções são utilizadas para fazer cálculos matemáticos, iremos criar uma função que gera um valor aleatório que utilizaremos como altura e largura para as nossas divs.
Para criar uma função, iremos precisar utilizar o código @function seguido do nome da função que será definida e de parênteses. Nas funções, também será preciso definir um retorno, que sempre será do tipo numérico. No código abaixo, criei a função que irá gerar um tamanho aleatório:
@function tamanhoAleatorio()
$valorAleatorio: random(10)
@return $valorAleatorio * 50
Neste exemplo, a variável $valorAleatorio terá um valor entre 1 e 10, e então multiplicaremos este valor por 50 para obter um tamanho aleatório que seja perceptível na tela. Podemos utilizar essa função diretamente nos seletores que temos no código, em outra função, ou em um mixin. Eu vou modificar o mixin tamanho para podermos utilizar essa função lá.
No mixin, precisamos utilizar uma sintaxe de interpolação para que o valor numérico aleatório gerado pela função seja seguido da unidade correta, o que resultará em um tamanho que o Sass poderá converter para CSS.
@mixin tamanho()
width: #{tamanhoAleatorio()}px
height: #{tamanhoAleatorio()}px
Depois dessa alteração no mixin, precisamos alterar também todas as chamadas a essa função para retirarmos os argumentos dela. O código final fica assim:
@function tamanhoAleatorio()
$valorAleatorio: random(10)
@return $valorAleatorio * 50
@mixin tamanho()
width: #{tamanhoAleatorio()}px
height: #{tamanhoAleatorio()}px
@mixin formatacao($fundo)
background-color: $fundo
font-size: 8rem
text-align: center
body
display: flex
gap: 10px
#estilo-1
@include tamanho
@include formatacao($fundo: green )
#estilo-2
@include tamanho
@include formatacao($fundo: red )
#estilo-3
@include tamanho
@include formatacao($fundo: gray )
#estilo-4
@include tamanho
@include formatacao($fundo: blue )
E agora uma vez que o código seja compilado teremos as div com tamanhos aleatórios, como mostrado na figura abaixo.
Uma coisa importante de mencionar sobre esse exemplo é que as alturas e larguras dos elementos serão alteradas apenas quando o arquivo Sass for transpilado, já que os tamanhos só serão sorteados quando o mixin tamanho for executado.
Considerações finais
Neste artigo conhecemos os conceitos de funções e mixins do Sass e conseguimos ver o como podemos utilizar esses recursos para aumentar o reuso de código da aplicação, o que implica em uma maior manutenibilidade.
