"El buen diseño es obvio. El gran diseño es transparente"
- Joe Sparano

Bourbon y Sass

3 minutos de lectura
Fecha: 20/7/2017

Bourbon y Sass van de mano para facilitarnos la vida en el desarrollo de páginas web. Bourbon es una librería de mixins y funciones de Sass creada por thoughtbot que nos permitirá simplificar nuestras hojas de estilos y generar código de forma elegante.

Si quieres saber que son los mixins y las funciones, aqui tienes un artículo lleno de ejemplos que además los compara y explica como usarlos.

Al igual que Sass se trata de una gema de Ruby, y para instalarla hacemos lo habitual:

gem install bourbon

Con este simple comando ya tenemos la librería de mixins en nuestro sistema, ahora solo debemos incorporarla a nuestro proyecto, para ello lo que hacemos es volcar la librería dentro del mismo. Para ello nos posicionamos en un directorio (lo lógico sería el directorio raiz donde tengamos nuestros ficheros de sass) y ejecutamos:

bourbon install

Con la librería ya dentro de nuestro proyecto nos vamos al fichero raiz y lo importamos así:

@import "bourbon/bourbon";

Ya tenemos disponibles en nuestro código todos estos útiles mixins, aqui os dejo la página oficial de este proyecto donde podeis ver la guía de instalación bajo el encabezado Install for a Non-Rails App, además de los pasos ya comentados también mencionan que lances sass con un watcher para que te compile de manera automatica el código, pero esto no es un paso necesario para instalarlo por eso lo he obviado.

Como se usa?

Para usar Bourbon en nuestros proyectos lo primero que tenemos que hacer es consultar en su documentación cuales son los mixins y funciones que tiene, y para que sirven. Trae un gran número así que os voy a explicar solo algunos para que sirva de muestra de lo que podemos llegar a hacer, y por cierto aqui os dejo el enlace a la documentación, (si veis que estan tachados querra decir que estan obsoletos y en la ultima versión fueron eliminados).

Veamos el mixin Font Face, este nos sirve para incluir nuestras fuentes en multiples formatos de forma sencilla, recordamos que es recomendable agregar todos los formatos pues cada navegador acepta unos u otros y tambien debemos tener cuidado con el orden en el que las incorporamos pues las versiones antiguas de IE se quedan con la primera ubicación.

Todas estas pautas las podemos ignorar si dejamos que el mixin contruya el codigo, por ejemplo si quisieramos instalar la fuente Source Sans Pro en su variante regular

@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular", $file-formats: ttf eot woff2 woff svg);

@font-face {
  font-family: "source-sans-pro";
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/source-sans-pro/source-sans-pro-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/source-sans-pro/source-sans-pro-regular.woff2") format("woff2"), url("/fonts/source-sans-pro/source-sans-pro-regular.woff") format("woff"), url("/fonts/source-sans-pro/source-sans-pro-regular.ttf") format("truetype"), url("/fonts/source-sans-pro/source-sans-pro-regular.svg#source-sans-pro") format("svg"); }

Otra practica que todo buen frontend debe seguir es dotar sus páginas de un ritmo tipográfico correcto, y esto se hace usando una escala modular, la página de referencia es esta. Bourbon tiene una función para hacer esto, se llama Modular Scale y por defecto usa como escala «Perfect Fourth» (4/3), pero podriamos usar proporciones aureas cambiando este valor por 1.618 por ejemplo.

font-size: modular-scale(1);
font-size: modular-scale(2);
font-size: modular-scale(3);

font-size: 1.333em;
font-size: 1.77689em;
font-size: 2.36859em;

Por ultimo veamos el mixin position, con el cual podemos escribir de forma abreviada los atributos position, top, right, bottom y left que suelen ir de la mano. Este mixin cuenta con dos parametros, al primero le pasamos el posicionamiento y al segundo los distintos valores de este separados por espacios y considerando null aquellos que no querramos escribir, se ve mas claro con un ejemplo…

.elemento{
    @include position(absolute, 15rem null null 10rem);
}

.elemento {
  position: absolute;
  top: 15rem;
  left: 10rem; }

Como vemos con todos estos ejemplos usar Bourbon es de lo más sencillo!

Compass o Bourbon?

Cuando hablamos de librerias de mixins en muchos casos la primera que se viene a la mente es compass, posiblemente es la más conocida que existe, y sin duda es muy buena, de hecho comparten muchos mixins ya que hay cosas que cualquier desarrollador frontend usa a menudo en sus hojas de estilo. Personalmente Bourbon me gusta más, porque aporta funcionalidades muy utiles que echo en falta en Compass.

Secciones