{"componentChunkName":"component---src-templates-single-template-tsx","path":"/sass-parte-3-mixins","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

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.

\n

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

\n
\n

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.\n Traduzido de: sass-lang.com

\n
\n

Legal e por onde eu começo?

\n

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

\n
@mixin border-radius($radius) {\n  -webkit-border-radius: $radius;\n  -moz-border-radius: $radius;\n  -ms-border-radius: $radius;\n  border-radius: $radius;\n}\n\n.card {\n  @include border-radius(4px);\n}
\n

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

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

Legal não!?

\n

Conclusão

\n

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.

\n

Por enquanto é isso, obrigado.

\n
\n
    \n
  1. Conhecendo o pré-processador SASS - Instalação
    2. \n
  2. Conhecendo o pré-processador SASS - Variáveis
    3. \n
  3. Conhecendo o pré processador SASS - Mixins
    4. \n
  4. Conhecendo o pré processador SASS - Funções
    5. \n
  5. Conhecendo o pré-processador SASS - Placeholder
    6. \n
","excerpt":"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…","timeToRead":1,"frontmatter":{"category":["sass"],"date":"há 11 anos","datePublished":"2015-09-05T00:00:00.000Z","description":"Mixin foi definitivamente algo novo para mim, você consegue passar valores por parâmetros assim como funções","path":"/sass-parte-3-mixins","tags":["sass","css","pre-processador"],"title":"#3 - Conhecendo o pré processador SASS | Mixins","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":240}}}},"pageContext":{}}}