Mixins e inclusões

Uma mistura no Sass é um bloco reutilizável de declarações CSS. Ao contrário de uma classe comum, ela pode aceitar parâmetros, o que a torna mais flexível do que copiar e colar. Defina-a com @mixin e use-a com @include.

Uma mistura sem parâmetros é apenas um bloco reutilizável:

Passe valores para uma mistura para personalizar sua saída:

Defina valores padrão para os argumentos da mistura, tornando-os opcionais:

Passe os argumentos da mistura por nome para obter mais clareza:

As misturas podem aceitar um bloco de conteúdo usando @content. O bloco incluído é inserido onde @content aparece:

Uma mistura comum para consultas de mídia:

Uma mistura de estilo de texto para uma escala tipográfica consistente:

As misturas geram declarações CSS; as funções retornam um valor. Use uma mistura quando quiser gerar várias regras CSS; use uma função quando precisar de um único valor calculado.

Excesso de misturas cria camadas de abstração indiretas que são difíceis de depurar. Só crie uma mistura se um padrão for reutilizado 3 ou mais vezes. Para estilos usados uma única vez, escreva o CSS diretamente.

Qual é a finalidade de @content dentro da definição de uma mistura do Sass?

Defina misturas com @mixin e use-as com @include. As misturas aceitam parâmetros com valores padrão opcionais. @content permite que os chamadores insiram blocos CSS na mistura — possibilitando padrões de encapsulamento, como auxiliares para consultas de mídia. Crie misturas somente para padrões reutilizados várias vezes, evitando o custo de abstrações desnecessárias.