---
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: Crea CSS reutilizable con Mixins
---
## Description
En Sass, un mixin
es un grupo de declaraciones CSS que se pueden reutilizar en toda la hoja de estilos. Las nuevas características de CSS toman tiempo antes de que se adopten por completo y estén listas para usar en todos los navegadores. A medida que las funciones se agregan a los navegadores, las reglas CSS que los usan pueden necesitar prefijos de proveedores. Considere "caja de sombra": div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
cuadro de sombra: 0px 0px 4px #fff;
}
Es mucho escribir para volver a escribir esta regla para todos los elementos que tienen una box-shadow
, o para cambiar cada valor para probar diferentes efectos. Mixins
son como funciones para CSS. Aquí está cómo escribir uno: @mixin box-shadow ($ x, $ y, $ blur, $ c) {
-webkit-box-shadow: $ x, $ y, $ blur, $ c;
-moz-box-shadow: $ x, $ y, $ blur, $ c;
-ms-box-shadow: $ x, $ y, $ blur, $ c;
box-shadow: $ x, $ y, $ blur, $ c;
}
La definición comienza con @mixin
seguido de un nombre personalizado. Los parámetros ( $x
, $y
, $blur
y $c
en el ejemplo anterior) son opcionales. Ahora, cada vez que se necesita una regla de box-shadow
, solo una línea que llama a la mixin
reemplaza tener que escribir todos los prefijos de proveedores. Se llama un mixin
con la directiva @include
: div {
@include box-shadow (0px, 0px, 4px, #fff);
}
## Instructions
Escribe una mixin
para border-radius
de border-radius
y dale un parámetro de $radius
. Debe usar todos los prefijos de proveedores del ejemplo. A continuación, utilice la border-radius
mixin
para dar el #awesome
elemento de un radio de borde de 15 píxeles.
## Tests
```yml
tests:
- text: Su código debe declarar un mixin
llamado border-radius
que tiene un parámetro llamado $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: Su código debe incluir el -webkit-border-radius
que usa el 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: Su código debe incluir el prefijo de vendedor -moz-border-radius
que usa el 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: Su código debe incluir el -ms-border-radius
que usa el 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: Su código debe incluir la regla general border-radius
que usa el 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: 'Su código debe llamar a la border-radius mixin
usando la palabra clave @include
, configurándolo en 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
```