freeCodeCamp/guide/portuguese/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md

title	localeTitle
Create Reusable CSS with Mixins	Crie CSS Reutilizável com Mixins

Crie CSS Reutilizável com Mixins

Mixin é um dos grandes recursos que permite aos desenvolvedores usar o SASS vez do CSS simples, já que ele permite que você tenha uma Function dentro da sua folha de estilo!

Para criar um mixin, você deve seguir o seguinte esquema:

@mixin custom-mixin-name($param1, $param2, ....) { 
    // CSS Properties Here... 
 } 

E para usá-lo em seu (s) elemento (s), você deve usar @include seguido pelo seu nome Mixin , como segue:

element { 
    @include custom-mixin-name(value1, value2, ....); 
 } 

---

[Exemplo] Escreva uma Text Shadow no SASS

Objetivo: Aplicar uma Text Shadow personalizada a um elemento h4

HTML

<h4>This text needs a Shadow!</h4> 

SASS (escrito na sintaxe do SCSS)

@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) { 
    -webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color; 
    -moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color; 
    -ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color; 
    text-shadow: $offsetX, $offsetY, $blurRadius, $color; 
 } 
 h2 { 
    @include custom-text-shadow(1px, 3px, 5px, #999999) 
 }