Fala, pessoal. Nós falamos em um artigo anterior aqui no blog sobre como o Sass pode facilitar o desenvolvimento de estilos através de recursos como criação de variáveis e aninhamento. Já neste artigo, nós vamos explorar mais duas das funcionalidades do Sass: a criação de funções e mixins.
Para que servem as funções e mixins no Sass?
Para começar, para que servem as funções e mixins do Sass? Os mixins têm o mesmo objetivo que as funções em qualquer linguagem de programação, ou seja, facilitar o reuso de código.
Já as funções do Sass servem para que possamos criar implementações de códigos que envolvem cálculos matemáticos.
Exemplo de utilização de mixins
Primeiramente, antes de criar 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>
<div id="estilo-5">5</div>
<div id="estilo-6">6</div>
</body>
</html>
Perceba que esse código gera apenas uma página web em branco com alguns números no canto superior esquerdo.
Meu objetivo aqui é que as divs possuam tamanhos e cores de fundo diferentes, portanto, para isso, eu vou criar dois mixins.
O primeiro deles será responsável por definir o tamanho das caixas.
Esse mixin terá valores padrão para a altura e largura da caixa.
Em seguida, criarei um segundo mixin para fazer a formatação interna da caixa como a sua cor de fundo, tamanho e alinhamento do número.
Você pode ver esses mixins abaixo:
@mixin tamanho($largura:200px, $altura:200px)
width: $largura
height: $altura
@mixin formatacaoCaixa($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 código que estiver dentro do escopo do mixin será “retornado” automaticamente.
Já as passagem de parâmetros, no entanto, funciona como estamos acostumados, utilizando a mesma sintaxe das variáveis do Sass. Portanto, para criar parâmetros opcionais, basta definir um valor para o parâmetro através de dois pontos.
Agora, vamos utilizar essas funções para fazer a formatação das caixas. Observe o exemplo a seguir:
body
display: flex
gap: 10px
#estilo-1
@include tamanho
@include formatacaoCaixa($fundo: green )
#estilo-2
@include tamanho(250px, 150px)
@include formatacaoCaixa($fundo: red )
#estilo-3
@include tamanho (300px)
@include formatacaoCaixa($fundo: gray )
#estilo-4
@include tamanho ($altura:400px, $largura:400px)
@include formatacaoCaixa($fundo: crimson )
#estilo-5
@include tamanho ($altura:300px)
@include formatacaoCaixa($fundo: orange )
#estilo-6
@include tamanho ($altura:150px, $largura:160px)
@include formatacaoCaixa($fundo: purple)
Depois disso, é só compilar o nosso arquivo Sass para CSS e teremos algo como o resultado abaixo:
Exemplo de utilização de funções
Agora vamos criar uma função que define uma altura e uma largura aleatória para as nossas caixas. E para fazer isso, vamos usar o mesmo código desenvolvido no exemplo anterior.
Para criar uma função, vamos precisar utilizar @function, e diferentemente dos mixins, precisaremos também definir um retorno para este tipo de estrutura.
@function tamanhoAleatorio()
$valorAleatorio: random(10)
@return $valorAleatorio * 50
Nesse exemplo, a variável valorAleatorio terá um valor entre 1 e 10. Depois disso, multiplicaremos este valor por 50 para obter um tamanho aleatório para nossos elementos.
Nós podemos utilizar essa função diretamente nos seletores que temos no código, ou então em uma outra função ou mixin.
Eu vou modificar a função tamanho para que possamos utilizar essa função lá.
@mixin tamanho()
width: #{tamanhoAleatorio()}px
height: #{tamanhoAleatorio()}px
Nesse mixin, vamos utilizar uma sintaxe diferente para que possamos fazer com que o valor aleatório gerado pela função seja interpolado com a unidade de medida correta, já que a nossa função tamanhoAleatorio só retornará um valor numérico e não a sua unidade.
Depois dessa alteração no mixin tamanho, vamos alterar também todas as chamadas a ele para retirarmos os argumentos delas.
O código final fica assim:
@function tamanhoAleatorio()
$valorAleatorio: random(10)
@return $valorAleatorio * 50
@mixin tamanho()
width: #{tamanhoAleatorio()}px
height: #{tamanhoAleatorio()}px
@mixin formatacaoCaixa($fundo)
background-color: $fundo
font-size: 8rem
text-align: center
body
display: flex
gap: 10px
#estilo-1
@include tamanho
@include formatacaoCaixa($fundo: green )
#estilo-2
@include tamanho
@include formatacaoCaixa($fundo: red )
#estilo-3
@include tamanho
@include formatacaoCaixa($fundo: gray )
#estilo-4
@include tamanho
@include formatacaoCaixa($fundo: crimson )
#estilo-5
@include tamanho
@include formatacaoCaixa($fundo: orange )
#estilo-6
@include tamanho
@include formatacaoCaixa($fundo: purple)
E agora, uma vez que o código seja compilado, teremos as formas com valores 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 todas as vezes que o nosso arquivo Sass for compilado.
Isso acontece porque o mixin tamanho vai gerar valores aleatórios no CSS, e, caso o arquivo Sass não seja modificado, o arquivo CSS não será alterado e permanecerá com a altura e largura anteriores.
E se você quiser conhecer outras vantagens do Sass, nós gravamos um vídeo falando sobre ele.
Então é isso, pessoal. Até a próxima e bons estudos!
