---
id: 587d7dbd367417b2b2512bb6
title: Create Reusable CSS with Mixins
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
raw: true
challengeType: 0
videoUrl: ''
localeTitle: Crie CSS Reutilizável com Mixins
---
## Description
No Sass, um mixin
é um grupo de declarações CSS que podem ser reutilizadas em toda a folha de estilo. Os novos recursos do CSS levam tempo antes de serem totalmente adotados e prontos para serem usados em todos os navegadores. Como os recursos são adicionados aos navegadores, as regras CSS que os usam podem precisar de prefixos de fornecedores. Considere "box-shadow": div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
É muita digitação para reescrever esta regra para todos os elementos que possuem uma box-shadow
, ou para alterar cada valor para testar diferentes efeitos. Mixins
são como funções para CSS. Aqui está como escrever um: @mixin box-shadow ($ x, $ y, $ blur, $ c) {
-webkit-box-shadow: $ x, $ y, $ borrão, $ c;
-moz-box-shadow: $ x, $ y, $ borrão, $ c;
-ms-box-shadow: $ x, $ y, $ blur, $ c;
box-shadow: $ x, $ y, $ blur, $ c;
}
A definição começa com @mixin
seguido por um nome personalizado. Os parâmetros ( $x
, $y
, $blur
e $c
no exemplo acima) são opcionais. Agora, sempre que uma regra de box-shadow
é necessária, apenas uma linha chamando o mixin
substitui a necessidade de digitar todos os prefixos do fornecedor. Um mixin
é chamado com a diretiva @include
: div {
@include box-shadow (0px, 0px, 4px, #fff);
}
## Instructions
Escreva um mixin
para border-radius
e atribua a ele um parâmetro $radius
. Deve usar todos os prefixos do fornecedor do exemplo. Em seguida, utilizar a border-radius
mixin
para dar o #awesome
elemento de um raio de fronteira de 15 pixels.
## Tests
```yml
tests:
- text: Seu código deve declarar um mixin
chamado border-radius
que tenha um parâmetro chamado $radius
.
testString: 'assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), "Your code should declare a mixin
named border-radius
which has a parameter named $radius
.");'
- text: Seu código deve incluir o -webkit-border-radius
que usa o parâmetro $radius
.
testString: 'assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), "Your code should include the -webkit-border-radius
vender prefix that uses the $radius
parameter.");'
- text: Seu código deve incluir o prefixo de vendedor -moz-border-radius
que usa o parâmetro $radius
.
testString: 'assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), "Your code should include the -moz-border-radius
vender prefix that uses the $radius
parameter.");'
- text: Seu código deve incluir o prefixo do -ms-border-radius
que usa o parâmetro $radius
.
testString: 'assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), "Your code should include the -ms-border-radius
vender prefix that uses the $radius
parameter.");'
- text: 'Seu código deve incluir a regra geral border-radius
, que usa o parâmetro $radius
.'
testString: 'assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, "Your code should include the general border-radius
rule that uses the $radius
parameter.");'
- text: 'Seu código deve chamar o @include
border-radius mixin
usando a palavra-chave @include
, configurando-a para 15px.'
testString: 'assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), "Your code should call the border-radius mixin
using the @include
keyword, setting it to 15px.");'
```
## Challenge Seed
## Solution
```js
// solution required
```