{ . . . }

El poder de los Mixins en Sass

Sin Comentarios

El poder de los Mixins en Sass. Un mixin es un trozo de código con declaraciones CSS que nos va permite reutilizar el código vinculado en el mismo en toda la hoja de estilos. En teoría esto es un mixin pero en la práctica un Mixin es un método que nos ofrece SASS para hacernos la vida extremadamente fácil al momento de escribir código CSS, y esto era lo que estaba en las cabezas de los creadores de SASS ”porque algunas cosas se vuelven tediosas al momento de escribir código CSS”.

Mixins, Conceptos Básicos

¿Como definimos un mixin en Sass?

Para difinir un mixin especificamos la directiva @mixin seguido del nombre que le daremos al mismo y entre llaves el código CSS que asociaremos al mixins. Ejemplo:

@mixin nombremixin {
    font-size: 1em;
    color: #888;
    text-transform: uppercase;
}

El siguiente paso es la asignación. Para aplicar un mixin dentro de alguna regla CSS simplemente lo llamamos incluyendo la regla @include junto al nombre asociado al mixin que queremos incluir.

@include nombremixin;

Mixins parámetrizados

El verdadero poder los los mixins se encuentra en sus parámetros, estas opciones, ( los argumentos de los parámetros ) nos van a permitir extender el alcance y dar opciones más específicas para que podamos personalizar aún más  las reglas a incluir en el mixin. Estas opciones nos van a permitir utilizar el mixin en cualquier regla CSS que posea las mismas propiedades sin importar sus valores, ya que por medio de los argumentos los vamos a poder personalizar. Veamos:

Una vez definimos el mixin y definimos las diferentes variables locales del mixin pasamos a incluirla dentro de la regla CSS por medio del @include, luego en la regla CSS definimos  los diferentes valores que reemplazan las variables en los parámetros del mixin que ya con un valor definido se los pasa a las propiedades que se incluyen en el mixin y esta a su vez enviándola a cada regla donde es llamado el mixin.

Mixins en Sass - parametros

Una vez tengamos los concepto claros de lo que acabamos de ver en cuanto a los mixins, el uso básico y el saber utilizar sus parámetros podemos acceder a todos sus beneficios. Veamos un ejemplo simple de la utilidad de un función en Sass en conjunto a un mixin para calcular algún valor, en este caso un tamaño para fuente en rem.

Librerías para utilizar Mixins en SASS

Si queremos ir mas allá del uso común de los Mixins, podemos utilizar algunas de las diferentes librerías existentes que nos ayudaran a ser aun mas eficiente en la escritura de código CSS. Las principales y más conocidas librerías que incluyen mixins increíbles son Compass y Bourbon.

Por ejemplo, utilizando Compass podemos llamar e incluir  el siguiente Mixin sin preocuparnos de los diferentes prefijos, ni aun de crearlo ya que la librería nos hace todo el trabajo. Veamos:

En el solo el ejemplo anterior nos ahorramos el tener que escribir 4 líneas de código, imagínate cuantas te ahorrarías al momento de desarrollar un sitio grande o aun mediano.

En conclusión: El verdadero poder de SASS está en el correcto uso de cada uno de sus funciones, entenderlas y saberlas aplicar. En el caso de los Mixins nos ahorra muchas líneas de código al momento de escribir CSS y el utilizar alguna librería nos ahorra mucho tiempo y nos vuelve aún más frontend’s eficientes.

Más información de los Mixins y más en el Curso Básico de Sass

Comentar

avatar