freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/sass/create-reusable-css-with-mixins.spanish.md

id	title	required	challengeType	videoUrl	localeTitle
587d7dbd367417b2b2512bb6	Create Reusable CSS with Mixins	src raw https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js true	0		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

tests:
  - text: Su código debe declarar un <code>mixin</code> llamado <code>border-radius</code> que tiene un parámetro llamado <code>$radius</code> .
    testString: 'assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), "Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.");'
  - text: Su código debe incluir el <code>-webkit-border-radius</code> que usa el parámetro <code>$radius</code> .
    testString: 'assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: Su código debe incluir el prefijo de vendedor <code>-moz-border-radius</code> que usa el parámetro <code>$radius</code> .
    testString: 'assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: Su código debe incluir el <code>-ms-border-radius</code> que usa el parámetro <code>$radius</code> .
    testString: 'assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: Su código debe incluir la regla general <code>border-radius</code> que usa el parámetro <code>$radius</code> .
    testString: 'assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, "Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.");'
  - text: 'Su código debe llamar a la <code>border-radius mixin</code> usando la palabra clave <code>@include</code> , configurándolo en 15px.'
    testString: 'assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), "Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.");'

Challenge Seed

<style type='text/sass'>



  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;

  }
</style>

<div id="awesome"></div>

Solution

// solution required