Sigo peleando. No he terminado el primer set de vídeos y eso me trae un poco cabezon. El curso de sass dice que es de tres horas, y ya llevo tres días y todavía no termino.
Mixins
Problema que resuelven: reutilización de código de CSS. Paul Graham en su libro Hackers Vs. Painters defiende que si tienes que copiar y pegar código dentro de tu aplicación, entonces estás programando mal. Kevlin Henney también respalda esta idea.
Al comienzo los mixins recuerdan un poco a las macros de C; pedazos de código que se agrupan con un identificador. Luego, cada vez que vas a usar ese segmento de código, en vez llamas a la macro.
La principal diferencia entre las macros y las funciones es que las primeras son preprocesadas, y las segundas son compiladas. Entonces un mixin es más parecido a una macro que a una función.
Uso de un mixin
En la página oficial de Sass hacen un comentario interesante de los mixins, y es que en CSS3 hay que definir propiedades con prefijos de cada navegador (vendor prefixes)
@mixin border-radius($radius : 15px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Y para estos casos es útil la herramienta. El llamado se realiza mediante la directiva @include:
.box { @include border-radius(10px); }
Nota que la definición original tiene un argumento $radius, y que en el llamado al mixin se pasa un valor de 10px. Si no se pasa ningun argumento en el llamado de border-radius, entonces el valor por defecto de radius es de 15px.
Y básicamente esto es todo amigos.