Sassc y Bourbon: funciona

Ayer quise profundizar en Sass probando Sassc. Sassc es un wrapper para Libsass y Libsass es un compilador de Sass construido en C++. El proyecto fue creado y anunciado por Hampton Catlin (creador de Sass).

¿Por qué Libsass?

La versión oficial de Sass está escrita en Ruby y continuará creciendo como un proyecto Ruby. Pero Ruby es generalmente lento y no solo para frameworks web: es el mismo problema para programas de línea de comandos. En Moovweb, decidieron intentar portar Sass con C++ y obtener la mejor velocidad en grandes compilaciones jamás vista. Tuvieron éxito. El objetivo de Libsass es ser 1:1 equivalente a la versión normal de Sass (en Ruby). Hoy en día, faltan algunas características como placeholders y SASS_PATH. Echa un vistazo a los problemas actuales.

ACTUALIZACIÓN 10 Feb 2023

10 años después de este post, acabo de ver que Libsass ahora está obsoleto en favor de Dart Sass . Del sitio web oficial :

LibSass es una implementación de Sass en C/C++, diseñada para ser fácil de integrar en muchos lenguajes diferentes. Sin embargo, con el paso del tiempo terminó quedándose atrás de Dart Sass en características y compatibilidad CSS. LibSass ahora está obsoleto—los nuevos proyectos deberían usar Dart Sass en su lugar.

Pero fue un buen viaje y aprendí mucho trabajando en Libsass en 2013. Sass sigue vivo y más fuerte que nunca.

Instalando Sassc

El README está bien documentado, pero aquí están los pasos.

• Clona el proyecto:

git clone git@github.com:hcatlin/sassc.git

• Actualiza los submódulos:

cd sassc/ git submodule init git submodule update

• Compila:

make

Ahora, tienes acceso al binario ./bin/sassc. Lo que hago es enlazar esto en mi PATH:

sudo ln -s $(pwd)/bin/sassc /usr/bin/sassc

Instalando Bourbon

La instalación de Bourbon es técnicamente un simple copiar/pegar de la carpeta app/assets/stylesheets en tu proyecto sass (para uso independiente). Los mixins de Bourbon tienen un pequeño problema que parcheé en este pull request ayer. Fue inmediatamente fusionado en el repositorio oficial. La última gema en Rubygems es vieja (abril de 2013) así que te recomiendo usar el repositorio de Github.

• Clona el repositorio:

git clone git@github.com:thoughtbot/bourbon.git

• Copia los mixins a tu carpeta sass:

cp -R bourbon/app/assets/stylesheets /path/to/my/sass/bourbon

• Ahora tienes una carpeta bourbon/ en tu proyecto sass y para usar los mixins de Bourbon, simplemente impórtalo:

@import "bourbon/bourbon";

Ejecutando algunos ejemplos

La mejor manera de entender el beneficio de Sassc es probarlo contra un proyecto real. Tengo un proyecto (más de 5000 líneas de sass) que usaba Compass pero se volvió muy lento en la compilación: 6 segundos. Decidí dejar de usar Compass y simplemente ir con Bourbon. Esta fue la primera gran victoria. De 6 segundos a 2 segundos. Esta es la compilación del archivo main.scss con Ruby Sass clásico:

time sass src/css/core/main.scss # 1,51s user 0,28s system 81% cpu 2,188 total

Ahora, con el ejecutable sassc:

time sassc src/css/core/main.scss # 0,07s user 0,02s system 34% cpu 0,244 total

Casi 10x más rápido para mi proyecto: de 2200 ms a 250 ms chicos. Wow.

¿Por qué importa la velocidad?

El rendimiento podría no ser un problema en servidores de producción porque puedes escalarlo. Incluso con el lento intérprete de Ruby puedes escalar con caché y trucos. Eso no funciona con Sass y aplicaciones de línea de comandos. Es difícil escalar tu máquina local y es innecesario hacer APIs complejas o servicios para "simplemente compilar un archivo". Libsass es la respuesta y tiene un efecto real en tu flujo de trabajo. Uso LiveReload (con Grunt y grunt-contrib-watch) y soy un gran fan de diseñar en el navegador. No paso demasiado tiempo en Photoshop y empiezo a usar Sassc, Bourbon y LiveReload. Tienes el poder del lenguaje, la velocidad de C++ y la actualización en vivo en tu navegador para una visualización directa de tu trabajo. Simplemente pruébalo.

Por favor contribuye a Libsass o Sassc

No soy un chico de C/C++ pero realmente quiero aprender más porque Libsass importa y desearía poder ayudar. Si no puedes parchear directamente Libsass para los problemas abiertos, por favor contribuye en otro lugar. Por ejemplo: envía un pull request para actualizar toda la suite de pruebas. Esto es importante para tener una suite de pruebas limpia para todos los casos y tratar de ser 1:1 con las especificaciones de Sass. Puedes enviar problemas en Github con una explicación clara y la comunidad intentará resolverlo y parchearlo. Vi el futuro de Sass en Libsass.

Espero que este post pueda ayudarte a probar Libsass porque la instalación es fácil y no tuve ningún problema en mi OSX 10.8.3.