Aprendiendo Sass: Mixins

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.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s