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);
}

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.

```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.");' ```