Considerando el ejemplo anterior donde hablamos de botones 3D con SASS:
See the Pen Myavav by Uriel Hernández (urielhdz) on CodePen.
¿Cómo podríamos hacerlo más reusable? Intentemos utilizando Mixins.
Qué son
Un mixin es una "función" en el sentido de que nos permite reutilizar código y que acepta argumenos, sin embargo, no es una función como tal (podemos decir esto porque en SASS también existen las funciones). La característica de los mixins es que definen propiedades que después se incluyen en un selector.
Ejemplo
Un mixin se define con el keyword @mixin seguido del nombre y los posibles parámetros:
@mixin threed_button($color){
}
Y para utilizarlo lo incluímos en algún selector:
a{
@include threed_button(#eee);
}
Al incluirlo además pasamos el valor de los parámetros que se utilizan en el mixin. En este punto es fácil poder mover nuestro código del botón 3D:
@mixin threed-button($base-color){
$shadow: "";
@for $i from 1 through 4{
$shadow: $shadow + "#{$i}px #{$i}px 0px 2px " + darken($base-color,$i*5) + ",";
}
$shadow : str-slice($shadow,0,str-length($shadow)-1);
appearance: none;
border:none;
background: $base-color;
box-shadow: unquote($shadow);
}
Ahora apliquemos nuestro mixin:
.threed-btn--pink{
@include 3d_button(#ff4081);
font-size:18px;
color:white;
}
Aquí está funcionando:
See the Pen MyyJrW by Uriel Hernández (@urielhdz) on CodePen.
¿Por qué usar mixins? Este caso es un claro ejemplo de por qué, crear botones para otras combinaciones de colores es mucho más fácil:
.threed-btn--pink{
@include 3d_button(#ff4081);
font-size:18px;
color:white;
}
.threed-btn--red{
@include 3d_button(red);
font-size:18px;
color:white;
}
Y listo, tenemos una función de código que podemos ir reciclando.
Extra: Nota como no coloqué el color de la fuente en el mixin, esto en el caso de que queramos hacer botones claros, el mixin tiene que abstraer únicamente las responsabilidades del mixin (en este caso el botón 3d).
En el siguiente artículo veremos arreglos y ciclo each.
-
check_circle_outlineMódulo 1 | 4 clases
Cómo Funciona la Web
expand_more -
check_circle_outlineMódulo 2 | 3 clases
HTML
expand_more -
check_circle_outlineMódulo 3 | 3 clases
Boilerplate
expand_more -
check_circle_outlineMódulo 4 | 7 clases
Navegación
expand_more -
check_circle_outlineMódulo 5 | 5 clases
Slider
expand_more -
check_circle_outlineMódulo 6 | 11 clases
Pantallas Inicio y Cuartos
expand_more -
check_circle_outlineMódulo 7 | 5 clases
Google Maps
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Parallax
expand_more -
check_circle_outlineMódulo 9 | 4 clases
Responsive Design
expand_more -
check_circle_outlineMódulo 10 | 3 clases
Extra
expand_more -
check_circle_outlineMódulo 11 | 2 clases
Extras
expand_more