4.6 KiB
4.6 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbd367417b2b2512bb6 | Create Reusable CSS with Mixins | 0 | Crea CSS reutilizable con Mixins |
Description
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 {Es mucho escribir para volver a escribir esta regla para todos los elementos que tienen una
-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;
}
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) {La definición comienza con
-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;
}
@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
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