#3 - Conhecendo o pré processador SASS | Mixins

Mixin foi definitivamente algo novo para mim, você consegue passar valores por parâmetros assim como funções, a diferença é que uma função retorna apenas 1 único valor e mixin retorna um bloco inteiro de CSS.

O principal objetivo do Mixin é você poder reutilizar um determinado bloco de código por todo seu projeto.

Um mixin permite fazer grupos de declarações CSS que você deseja reutilizar em todo o site. Você pode até mesmo passar valores para fazer a sua mixin mais flexível. Traduzido de: sass-lang.com

Legal e por onde eu começo?

Vamos fazer um exemplo simples, o mesmo usado na documentação do SASS (sass-lang.com/guide).

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.card {
  @include border-radius(4px);
}

Esse bloco acima vai nos gerar o seguinte trecho de CSS:

.card {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

Legal não!?

Conclusão

Pense em Mixin como uma função que irá retornar um bloco inteiro de CSS ao invés de um valor único e que você pode usa-la em vários lugares do seu projeto sem precisar repetir ou copiar e colar blocos que são iguais.

Por enquanto é isso, obrigado.

1. Conhecendo o pré-processador SASS - Instalação
2. Conhecendo o pré-processador SASS - Variáveis
3. Conhecendo o pré processador SASS - Mixins
4. Conhecendo o pré processador SASS - Funções
5. Conhecendo o pré-processador SASS - Placeholder