Articles
Introdução ao SASS/SCSS
Mixins no SASS

Mixins no SASS

Este artigo explica os mixins no SASS.

Vamos explicar os mixins no SASS com exemplos práticos.

YouTube Video

Mixins no SASS

Visão Geral – O que é um Mixin?

Mixins são um mecanismo que permite definir conjuntos de propriedades de estilo usados com frequência como funções reutilizáveis, que você pode chamar onde for necessário. Eles são muito úteis para manter suas classes CSS e múltiplas propriedades DRY (Don't Repeat Yourself/Não se Repita).

Exemplo: O mixin mais simples

Abaixo está um exemplo simples de um mixin que reutiliza border-radius e box-shadow juntos. Chamando esse mixin, você pode aplicar a mesma aparência a vários elementos.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}
  • Com este mixin, não é mais necessário repetir estilos diretamente.
  • Para chamá-lo, basta uma linha: @include card-style;.

Mixins com argumentos (parâmetros)

Mixins podem receber argumentos, assim como as funções. Isso permite mudar a aparência usando a mesma lógica. A seguir, um exemplo em que a cor é recebida como argumento.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}
  • Ao fornecer um valor padrão, você pode controlar o comportamento caso um argumento seja omitido.
  • Neste exemplo, o raio padrão é usado e apenas a cor de fundo é sobrescrita.

Casos em que são usados argumentos variádicos (...)

Quando você precisa aceitar múltiplos valores, pode usar argumentos variádicos ($args...). Isso é útil para gerar classes utilitárias ou passar listas alternativas.

É útil quando é necessário passar múltiplas famílias de fontes ou múltiplos valores de sombra.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}
  • Na chamada, é possível passar múltiplas sombras separadas por vírgulas.
  • Dessa forma, você pode usar o mesmo mixin tanto para sombras simples quanto complexas.

Mixins com @content — Recebendo um bloco

Com @content, um mixin pode receber um bloco de estilos de quem está chamando. Isso permite que o mixin forneça um invólucro comum, enquanto o chamador especifica os detalhes internos.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}
  • No momento da chamada, é possível adicionar um bloco ao @include para inserir estilos dentro.
  • Esse padrão é útil para wrappers de layout como grids, cards e formulários.

Mixins avançados usando condicionais e laços

Estruturas de controle como @if e @for podem ser usadas dentro dos mixins. Você pode usá-los para automatizar a geração de utilitários e agrupar configurações responsivas.

Abaixo está um exemplo de geração automática de larguras de classes utilitárias.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);
  • Basta passar um mapa das frações que você deseja gerar no lado da chamada para gerar automaticamente todas as classes utilitárias correspondentes de uma só vez.
  • Usar esta abordagem tem a vantagem de reduzir definições manuais de estilos enquanto mantém a consistência no seu design.

Mixins vs Placeholders (%placeholder)

Enquanto os mixins inserem diretamente um conjunto de propriedades, placeholders são usados com @extend ao herdar estilos. Mixins podem gerar CSS duplicado em alguns casos, mas @extend pode produzir um CSS mais compacto em certas situações.

Ao entender os propósitos e as diferenças no CSS gerado por cada método, você poderá escolher a abordagem mais adequada.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}
  • Quando você usa @extend em um placeholder, múltiplos seletores podem ser consolidados em uma única regra, resultando em um CSS mais compacto.
  • Por outro lado, como os mixins inserem as propriedades diretamente onde são necessários, eles oferecem flexibilidade e ajudam a evitar a fusão não intencional de seletores.

Padrões práticos comuns (responsivo, prefixos de fornecedores, etc.)

Na prática, é útil colocar processamentos comuns como prefixos de fornecedores e recursos responsivos em mixins. Veja abaixo um exemplo que combina propriedades de transform e prefixos. Você pode centralizar o código para compatibilidade entre navegadores, facilitando a manutenção.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}
  • O uso é simples e você pode utilizá-lo em qualquer lugar, como @include transform(rotate(10deg));.
  • Mesmo que os prefixos se tornem desnecessários no futuro, a manutenção fica mais fácil porque atualizar o mixin reflete a mudança em toda a sua base de código.

Exemplo prático: cards e botões combinados

Abaixo está um exemplo onde os estilos dos botões usados dentro do cartão são unificados com um mixin, permitindo que eles sejam alternados de acordo com a cor do tema.

Isso organiza o padrão comum de 'card + botão' usando mixins.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}
  • Ao usar esses mixins, é possível escrever componentes de forma sucinta.

Atenção ao desempenho e ao CSS gerado

Como os mixins inserem propriedades toda vez que são chamados, o uso excessivo de @include para a mesma regra pode aumentar o tamanho do CSS final. É possível otimizar combinando-os com placeholders e design de componentes quando necessário.

Além disso, as seguintes medidas também são eficazes.

  • Os estilos usados com frequência devem ser transformados em classes para reutilização.
  • Padrões comuns devem ser agrupados usando @content.
  • A geração de utilitários complexos deve ser feita apenas no momento da build.

Dicas para facilitar o debug

Ao utilizar mixins, também é importante criar métodos para melhorar a depuração e a manutenção. Ao usar nomes de variáveis claros e adicionar comentários dentro dos mixins, será mais fácil entender ao revisar o código posteriormente. Além disso, se a funcionalidade se tornar complexa, dividir o mixin em unidades menores facilitará os testes e melhorará a manutenção.

Além disso, ativar os source maps permite rastrear facilmente qual mixin gerou qual CSS, facilitando o isolamento de problemas.

Abaixo está um exemplo de um mixin fácil de entender com comentários de documentação.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}
  • Ter comentários de documentação organizados assim facilita o compartilhamento e a compreensão dentro da equipe.
  • Como os comentários de documentação do SASS podem ser extraídos automaticamente com ferramentas compatíveis, eles também são úteis para gerar documentos como guias de estilo.

Resumo

Como os mixins permitem agrupar estilos usados frequentemente para reutilização, eles ajudam a reduzir a duplicação de código e melhoram a manutenibilidade. Além disso, quando vários seletores compartilham as mesmas regras, considere usar não apenas mixins, mas também @extend (placeholders). Além disso, enquanto @content permite a separação flexível entre wrappers de layout e conteúdo, o uso excessivo de @include pode resultar em um CSS gerado muito grande, então recomenda-se cautela. É importante fazer pleno uso de argumentos, valores padrão e argumentos variádicos para projetar mixins que sejam genéricos e fáceis de estender.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Módulos integrados do SASS