Otimize seu CSS com Mixins de SASS

Mixins são blocos de código que podem ser reutilizados a qualquer momento no seu CSS.

Funcionam mais ou menos como variáveis, porém você pode colocar muito mais dentro de um mixin e ainda passar parâmetros.

// Basta escrever @mixin e nomear mesmo
@mixin tipografia-titulo {
 font-size: 1.5em;
 font-weight: bold;
 font-family: monospace;
 color: #8844EE;
}

// O @include serve para chamar o mixin
h1 {
 @include tipografia-titulo;
 margin-bottom: 1em;
}

Eles ficam ainda mais interessantes e flexíveis quando passamos parâmetros:

// $tamanho é um parâmetro e você pode repetir ele
// quantas vezes você quiser dentro do mixin
@mixin circulo($tamanho) {
 width: $tamanho;
 height: $tamanho;
 border-radius: $tamanho / 2;
 overflow: hidden;
}

// Dentro dos parênteses você indica o valor do parâmetro
div {
 background: blue;
 @include circulo(100px);
}

Ao final este código será compilado em:

div {
 background: blue;
 width: 100px;
 height: 100px;
 border-radius: 50px;
 overflow: hidden;
}

Assim se você precisar mudar qualquer coisa no seu mixin, basta mudar nele que será atualizado automaticamente em todos os locais do site em que você chama o mesmo.

São infinitas as possibilidades, confira mais na aula gratuita de mixins do curso de CSS com SASS: https://www.origamid.com/aula/2-4-mixins/