A la hora de escribir código CSS modular, SASS es una de las primeras alternativas que se nos vienen a la mente dado por su potencia. Bourbon nace como una librería de mixins que nos va a permitir escribir mucho menos código en nuestros proyectos. Estudiaremos cómo instalarlo y cómo usarlo con ejemplos.
Instalación
Para usar Bourbon primero debemos instalar la gema con el siguiente comando:
gem install bourbonLuego tenemos que ir a la carpeta donde tengamos nuestros ficheros .scss (o donde queramos poner nuestra instalación) y ejecutamos el siguiente comando:
bourbon installEsto nos crea una carpeta llamada bourbon en donde hayamos ejecutado el comando anterior.
Lo siguiente que debemos hacer es hacer un watch en nuestros ficheros .scss, ya sea con GruntJS (explicado aqui) o con el comando clásico:
sass --watch stylesheets/sass:stylesheetsSolo nos queda hacer un import de Bourbon en nuestro fichero .scss de la siguiente forma:
@import 'bourbon/bourbon';Con esto finalizamos la instalación. Son una serie de pasos bastante fáciles la verdad.
Entendiendo para qué sirve Bourbon
Muchos vemos Sass como una manera de modularizar nuestro código CSS, así como ayudar a que sea mantenible dentro de un proyecto. También creamos mixins para poder reutilizar código, y más de uno habrá hecho alguna vez algo de este estilo:
@mixin radius($size){
border-radius: $size;
-moz-border-radius: $size;
-webkit-border-radius: $size;
-ms-border-radius: $size;
-o-border-radius: $size;
}//En nuestro fichero .scss
.example{
@include radius(5px);
}
Primero que nada aclarar que ya no debemos utilizar un mixin para los bordes redondeados, con poner solo border-radius obtenemos el resultado que queremos, pero para el ejemplo sirve de sobra.
A lo que quiero llegar es que nosotros tendemos a crear mixins de este tipo, hasta que nos damos cuenta de que existen herramientas como Compass o el mismo Bourbon que nos facilitan mucho la vida. Bourbon nos da mixins predeterminados para diferentes reglas CSS3 (entre otras cosas) que querramos utilizar.
Por ejemplo, si queremos aplicar el estilo "display: inline-block" válido para IE6 e IE7, debemos escribir tan solo lo siguiente:
.example{
@include inline-block;
}No nos debemos preocupar del resultado en nuestro fichero .css, solo debemos estar seguros de que esto valdrá para todos los navegadores.
También solemos posicionar elementos de manera absoluta y moverlos dentro de su contenedor. Esto sirve para iconos, por ejemplo.
Si escribimos lo siguiente:
@include position(absolute, 0px 0 0 10px);El resultado será:
position: absolute;
top: 0px;
left: 10px;¿Bourbon o Compass?
Pienso que para el desarrollo front-end de un sitio Web es mejor Bourbon ya que cuenta con algunas utilidades que son verdaderamente geniales. El manejo de animaciones, así como las opciones de posicionar elementos, convertir Ems en PXs y la adaptación a pantallas retina, entre más cosas, hacen que me decante por Bourbon.
Compass está más pensado para hacer Frameworks, pero Bourbon en conjunto con Neat (Lease aquí) es un puntapié perfecto para nuestros proyectos.
Conclusiones
Hemos visto una introducción muy interesante a esta librería, pero créanme que aun tiene más aplicaciones que no he mencionado. Para nuestro desarrollo Front-end Bourbon es perfecto para trabajar junto con Sass. En futuros artículos veremos como utilizar Neat en conjunto con Bourbon.