Updated spanish file (#38485)

This commit is contained in:
Iván Franco
2020-04-12 17:45:25 +02:00
committed by GitHub
parent 3683474b4b
commit 165387553d

View File

@@ -7,7 +7,7 @@ localeTitle: Crea CSS reutilizable con Mixins
---
## Description
<section id="description"> En Sass, un <code>mixin</code> 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 &quot;caja de sombra&quot;: <blockquote> div { <br> -webkit-box-shadow: 0px 0px 4px #fff; <br> -moz-box-shadow: 0px 0px 4px #fff; <br> -ms-box-shadow: 0px 0px 4px #fff; <br> cuadro de sombra: 0px 0px 4px #fff; <br> } </blockquote> Es mucho escribir para volver a escribir esta regla para todos los elementos que tienen una <code>box-shadow</code> , o para cambiar cada valor para probar diferentes efectos. <code>Mixins</code> son como funciones para CSS. Aquí está cómo escribir uno: <blockquote> @mixin box-shadow ($ x, $ y, $ blur, $ c) { <br> -webkit-box-shadow: $ x, $ y, $ blur, $ c; <br> -moz-box-shadow: $ x, $ y, $ blur, $ c; <br> -ms-box-shadow: $ x, $ y, $ blur, $ c; <br> box-shadow: $ x, $ y, $ blur, $ c; <br> } </blockquote> La definición comienza con <code>@mixin</code> seguido de un nombre personalizado. Los parámetros ( <code>$x</code> , <code>$y</code> , <code>$blur</code> y <code>$c</code> en el ejemplo anterior) son opcionales. Ahora, cada vez que se necesita una regla de <code>box-shadow</code> , solo una línea que llama a la <code>mixin</code> reemplaza tener que escribir todos los prefijos de proveedores. Se llama un <code>mixin</code> con la directiva <code>@include</code> : <blockquote> div { <br> @include box-shadow (0px, 0px, 4px, #fff); <br> } </blockquote></section>
<section id="description"> En Sass, un <code>mixin</code> 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 &quot;caja de sombra&quot;: <blockquote> div { <br> -webkit-box-shadow: 0px 0px 4px #fff; <br> -moz-box-shadow: 0px 0px 4px #fff; <br> -ms-box-shadow: 0px 0px 4px #fff; <br> cuadro de sombra: 0px 0px 4px #fff; <br> } </blockquote> Es mucho escribir para volver a escribir esta regla para todos los elementos que tienen una <code>box-shadow</code> , o para cambiar cada valor para probar diferentes efectos. <code>Mixins</code> son como funciones para CSS. Aquí está cómo escribir uno: <blockquote> @mixin box-shadow ($x, $y, $blur, $c) { <br> -webkit-box-shadow: $x $y $blur $c; <br> -moz-box-shadow: $x $y $blur $c; <br> -ms-box-shadow: $x $y $blur $c; <br> box-shadow: $x $y $blur $c; <br> } </blockquote> La definición comienza con <code>@mixin</code> seguido de un nombre personalizado. Los parámetros ( <code>$x</code> , <code>$y</code> , <code>$blur</code> y <code>$c</code> en el ejemplo anterior) son opcionales. Ahora, cada vez que se necesita una regla de <code>box-shadow</code> , solo una línea que llama a la <code>mixin</code> reemplaza tener que escribir todos los prefijos de proveedores. Se llama un <code>mixin</code> con la directiva <code>@include</code> : <blockquote> div { <br> @include box-shadow (0px, 0px, 4px, #fff); <br> } </blockquote></section>
## Instructions
<section id="instructions"> Escribe una <code>mixin</code> para <code>border-radius</code> de <code>border-radius</code> y dale un parámetro de <code>$radius</code> . Debe usar todos los prefijos de proveedores del ejemplo. A continuación, utilice la <code>border-radius</code> <code>mixin</code> para dar el <code>#awesome</code> elemento de un radio de borde de 15 píxeles. </section>