Categoria: sass

#3 - Conhecendo o pré processador SASS | Mixins

5 de Setembro de 2015

Mixin foi definitivamente algo novo para mim, você consegue passar valores por parâmetros assim como funções

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).

style.scss
@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:

style.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