Sassc et Bourbon : ça marche

Hier, je voulais approfondir Sass en essayant Sassc. Sassc est un wrapper pour Libsass et Libsass est un compilateur Sass construit en C++. Le projet a été créé et annoncé par Hampton Catlin (créateur de Sass).

Pourquoi Libsass ?

La version officielle de Sass est écrite en Ruby et elle continuera de croître en tant que projet Ruby. Mais Ruby est généralement lent et pas seulement pour les frameworks web: c'est le même problème pour les programmes en ligne de commande. Chez Moovweb, ils ont décidé d'essayer de porter Sass avec C++ et d'obtenir la meilleure vitesse jamais vue sur de grosses compilations. Ils ont réussi. Le but de Libsass est d'être équivalent 1:1 à la version normale de Sass (en Ruby). Aujourd'hui, certaines fonctionnalités manquent comme les placeholders et SASS_PATH. Jetez un œil aux problèmes actuels.

MISE À JOUR 10 Fév 2023

10 ans après ce post, je viens de voir que Libsass est maintenant obsolète au profit de Dart Sass . Du site officiel :

LibSass est une implémentation de Sass en C/C++, conçue pour être facile à intégrer dans de nombreux langages différents. Cependant, avec le temps, il a fini par prendre du retard sur Dart Sass en termes de fonctionnalités et de compatibilité CSS. LibSass est maintenant obsolète—les nouveaux projets devraient utiliser Dart Sass à la place.

Mais c'était une belle aventure et j'ai beaucoup appris en travaillant sur Libsass en 2013. Sass est toujours vivant et plus fort que jamais.

Installation de Sassc

Le README est bien documenté, mais voici les étapes.

• Cloner le projet :

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

• Mettre à jour les sous-modules :

cd sassc/ git submodule init git submodule update

• Compiler :

make

Maintenant, vous avez accès au binaire ./bin/sassc. Ce que je fais, c'est de le lier dans mon PATH :

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

Installation de Bourbon

L'installation de Bourbon est techniquement un simple copier/coller du dossier app/assets/stylesheets dans votre projet sass (pour une utilisation autonome). Les mixins Bourbon ont un petit problème que j'ai corrigé dans cette pull request hier. Cela a été immédiatement fusionné dans le dépôt officiel. La dernière gem sur Rubygems est vieille (avril 2013) donc je vous recommande d'utiliser le dépôt Github.

• Cloner le dépôt :

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

• Copier les mixins dans votre dossier sass :

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

• Vous avez maintenant un dossier bourbon/ dans votre projet sass et pour utiliser les mixins de Bourbon, il suffit de l'importer :

@import "bourbon/bourbon";

Lancer quelques exemples

La meilleure façon de comprendre l'avantage de Sassc est de le tester sur un projet réel. J'ai un projet (plus de 5000 lignes de sass) qui utilisait Compass mais il est devenu très lent à la compilation : 6 secondes. J'ai décidé d'arrêter d'utiliser Compass et de simplement utiliser Bourbon. C'était la première grande victoire. De 6 secondes à 2 secondes. Voici la compilation du fichier main.scss avec Sass Ruby classique :

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

Maintenant, avec l'exécutable sassc :

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

Presque 10x plus rapide pour mon projet : de 2200 ms à 250 ms les gars. Wow.

Pourquoi la vitesse compte ?

La performance pourrait ne pas être un problème sur les serveurs de production car vous pouvez la scaler. Même avec l'interpréteur Ruby lent, vous pouvez scaler avec du cache et des astuces. Ça ne marche pas avec Sass et les applications en ligne de commande. C'est dur de scaler votre machine locale et c'est inutile de faire des API complexes ou des services pour "juste compiler un fichier". Libsass est la réponse et cela a un effet réel sur votre flux de travail. J'utilise LiveReload (avec Grunt et grunt-contrib-watch) et je suis un grand fan du design dans le navigateur. Je ne passe pas trop de temps dans Photoshop et je commence à utiliser Sassc, Bourbon et LiveReload. Vous avez la puissance du langage, la vitesse du C++ et le rafraîchissement en direct dans votre navigateur pour une visualisation directe de votre travail. Essayez-le simplement.

S'il vous plaît, contribuez à Libsass ou Sassc

Je ne suis pas un gars du C/C++ mais je veux vraiment en apprendre plus parce que Libsass compte et j'aimerais pouvoir aider. Si vous ne pouvez pas patcher directement Libsass pour les problèmes ouverts, s'il vous plaît contribuez ailleurs. Par exemple: soumettez une pull request pour mettre à jour toute la suite de tests. C'est important d'avoir une suite de tests propre pour tous les cas et d'essayer d'être 1:1 avec les spécifications Sass. Vous pouvez soumettre des problèmes sur Github avec une explication claire et la communauté essaiera de comprendre et de patcher ça. J'ai vu l'avenir de Sass dans Libsass.

J'espère que ce post pourra vous aider à essayer Libsass car l'installation est facile et je n'ai eu aucun problème sur mon OSX 10.8.3.