Categoria: SASS

#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

nandomoreira
Escrito por Fernando Moreira
  • 1 minute to read.
  • 0

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

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