Compass vs Bourbon

por Natalia Ventre el ・ podés leerlo en 4 minutos ・

Sass extiende las características de CSS e incluye algunas funciones básicas (por ej. porcentaje) y funciones de colores (por ej. complementario, saturar). Bourbon y Compass llevan Sass al próximo nivel con más mixins y funciones para agilizar tus proyectos web, pero, ¿qué los diferencia? ¿cuál es mejor?

Round 1: Mixins y funciones

Bourbon

  • Mixins: Tiene mixins para las propiedades CSS3 y podés configurar para cuáles navegadores querés agregar prefijos. El mixin box está basado en la sintaxis de flex-box del 2009, pero hay un enlace a un mixin con la especificación de fines del 2012.
  • Funciones: Tiene funciones para generar layouts en columnas con anchos en porcentajes o pixeles, trabajar con escalas modulares y agrega 2 funciones de colores.
  • Add-ons: En los add-ons hay principalmente clases de utilidades, por ej. Clearfix, Hide-text (reemplazo de texto por imágenes).

Compass

  • CSS3: El módulo CSS3 tiene mixins para crear código CSS3 crossbrowser y podés configurar a cuáles navegadores/versiones querés darle soporte.
  • Helpers: Los ayudantes son funciones que aumentan las funciones de Sass. Incluyen más funciones de colores y matemáticas, funciones de dimensiones que retornan el ancho o altura de una imagen, etc. que te pueden servir para crear tu propio framework.
  • Layout: El módulo de maquetación no es una grilla, son un par de herramientas de maquetación, por ej. el mixin grid-background que usando degradés genera al vuelo una grilla, como en las aplicaciones de diseño, para verificar la alineación de los elementos en la página
  • Reset: Incluye el reset global de Eric Meyer y otras opciones.
  • Typography: El módulo tipografía incluye mixins para patrones comunes, por ej.: lista horizontal, reemplazo de texto con imágenes y para ajustar texto a una retícula base.
  • Utilities: Las utilidades son mixins básicos para patrones comunes, incluyendo un método sencillo para trabajar con sprites CSS1 y mixins para hacer layouts en columnas con CSS (floats y clearfix).

Round 2: Extensiones

Bourbon

Compass

Round 3: Documentación

Bourbon

La primera vez que visité el sitio me quedó muy claro que hace y para qué sirve Bourbon. La documentación es una única página, con explicaciones concisas y ejemplos de código. Los mixins y funciones están ordenados alfabéticamente.

documentación de Bourbon

Compass

Una vez que llegás a la referencia de cada función o mixin, está bien explicado e inclusive hay ejemplos de código (HTML, Sass y previsualización), pero el sitio está bastante recargado con publicidad, comentarios, enlaces a otros sitios que no sé qué tienen que ver con el tema. Hay que hacer varios clicks para llegar al contenido, son páginas y páginas de navegación. La referencia de por ej. las listas está repetida en typography y utilities, en general no lo encuentro bien organizado.

documentación de Compass

Y el ganador es… ¡Bourbon!

Compass es un meta-framework (un framework para desarrollar un framework). Para ese caso de uso concreto, tiene algunas funciones (helpers) que puede ser útiles, pero para el desarrollo front-end de un sitio web, Bourbon tiene varias joyitas:

  • HIDPI-media-query: genera una media query para pantallas de alta resolución
  • Flex-grid: es un mixin para crear fácilmente un layout con columnas con anchos en porcentajes.
  • Golden-ratio: retorna la sección áurea de un número y Modular-scale se puede usar para crear una escala modular con cualquier constante.
  • Button: es un estilo para botones, se puede elegir entre 3 estilos y cualquier color.
  • Em: convierte pixeles a ems. Acepta un segundo argumento (contexto).
  • Position: es una notación abreviada para la propiedad posición y Size para ancho y altura.
  • Triangle: genera un triángulo con CSS.

1) Para instalar la gema de Bourbon:

sudo gem install bourbon

2) Para crear la carpeta de Bourbon, desde la carpeta del proyecto ejecutar:

bourbon install

3) Importar los mixins a tu hoja de estilo:

@import 'bourbon/bourbon';

En OSX podés usar Bourbon con Codekit, Hammer o LiveReload y en Windows con LiveReload.


  1. Uno de los puntos fuertes de Compass es que es fácil de trabajar con sprites CSS, pero hoy en día, que se están usando las fuentes de símbolos para los iconos, no le encuentro mucho sentido.