Développer ses CSS avec Sass et Compass
Sass est un préprocesseur CSS dont le but est d'épargner bien du labeur à ceux qui doivent produire des feuilles de styles. Tel était en tout cas l'objectif de Hampton Catlin lorsqu'il l'a développé en 2006. Hampton Catlin est connu notamment pour avoir créé les sites et les applications mobiles de la fondation Wikimedia. Aidé de Nathan Weizenbaum, ils ont doté Sass de mécanismes similaires à ceux trouvés dans des langages de développement tels que Ruby, PHP ou Python. Un pari réussi en demi-teinte à l'époque. En effet, la syntaxe fortement inspirée de celle du langage Ruby en faisait un outil peu accessible pour les intégrateurs web.
Sass et Compass : un environnement mature
Le préprocesseur connaît un regain d'intérêt en 2008 lorsque Chris Eppstein rejoint l'équipe de développement. Avec Nathan, devenu entretemps leader du projet, ils font évoluer la syntaxe du préprocesseur pour qu'elle soit compatible avec CSS. La version 2.2.0 paraît mi-2009. Cette fois, l'objectif est atteint : en rapprochant la syntaxe de Sass de celle de CSS, la prise en main de l'outil devient plus facile et permet de réduire les temps de développement, y compris pour le débutant. L'adoption du préprocesseur se démocratise alors dès l'année 2010.
C'est aussi en 2008 que Chris Eppstein développe Compass, le premier framework pour Sass. Véritable boîte à outils CSS3, Compass se rend rapidement indispensable à ceux qui l'utilisent, grâce à des fonctionnalités puissantes telles qu'un générateur de sprites CSS.
Sass est devenu si populaire que d'importantes équipes de développement, telle celle de Google Chrome, contribuent au projet. C'est ainsi que le support de Source Maps a récemment été ajouté à Sass. Le préprocesseur et son framework CSS3 jouent désormais un rôle important dans la création de feuilles de styles. À tel point que le réseau social professionnel LinkedIn a embauché Chris Eppstein pour lui donner, entre autres missions, celle de maintenir Sass et Compass.
Il est toujours difficile de choisir une solution technique. Sans verser dans le prosélytisme aveugle, rappeler brièvement la genèse d'un projet aide à en évaluer la maturité. Sass est déjà vieux de sept années bien remplies, et à l'abri du soupçon d'effet de mode. Le nombre de ses contributeurs va grandissant. Sa pérennité est assurée. N'ayez crainte, vous avez fait le bon choix !
Environnements graphiques disponibles
Parce que le terminal peut rebuter plus d'un utilisateur non initié à la ligne de commande, des outils graphiques ont vu le jour. Tous ces outils ont la particularité d'embarquer Sass, Compass et parfois certaines extensions pour les deux outils. Ainsi, l'utilisateur n'a rien à installer en plus de l'outil graphique retenu.
En revanche, ces outils imposent une version de Sass et Compass pour tous vos projets : celle qui est embarquée dans le logiciel et pas forcément la dernière disponible en date. Ainsi, la technique de gestion avancée des versions des gems est impossible à mettre en œuvre avec un outil graphique. De même, la mise à jour de la version embarquée se fait parfois avec plusieurs mois de retard par rapport à sa disponibilité en ligne de commande.
Si vous préférerez y recourir, nous présentons ci-après six d'entre eux : Compass.app, Scout, Prepros, CodeKit et Mixture. Mais rappelons encore qu'en cas de problème avec l'un de ces outils, il est toujours temps de s'initier à la ligne de commande pour profiter de toute la puissance du préprocesseur !
L'environnement Compass.app pour Linux, Windows et OS X
Multi-plates-formes (Windows, Mac OS X et Linux), Compass.app fut la première
interface graphique pour Sass et Compass. Complet, l'outil :
propose le support de la version stable et de la version en développement de Sass
et Compass ;
supporte les notifications Growl sous Mac OS X ;
fournit le support à LiveReload pour permettre de rafraîchir automatiquement la
page du navigateur ;
embarque un serveur web.
Un tutoriel vidéo est proposé pour guider les nouveaux arrivants. Payant (10 $), sachez que 30% seront reversés à une fondation à but non lucratif américaine spécialisée dans les maladies mitochondriales.
Le compilateur Scout
Scout est une application gratuite pour Windows et Mac OS X qui permet de compiler à la volée les fichiers Sass et vos projets Compass. Son interface est simple et ne nécessite que peu de configuration.
Prepros
Nouveau venu dans la famille des interfaces graphiques pour Sass et Compass, Prepos fournit aussi un support à d'autres préprocesseurs CSS comme LESS ou Stylus. Gratuit et disponible pour Windows et Mac OS X, ses fonctionnalités sont similaires à celles de Compass.app. Il propose en plus des utilitaires d'optimisation des images, de concaténation et de minification des fichiers JavaScript.
CodeKit
Produit semblable à Prepros, CodeKit est exclusivement destiné au système d'exploitation Mac OS X. C'est l'outil le plus onéreux du panel présenté ici (25 €).
Mixture
Projet prometteur, Mixture est un outil de prototypage et de création rapide de sites statiques. Son support de Sass et Compass est bon, et permet même d'utiliser l'environnement Ruby et RubyGems de votre système.
Cet article est constitué à partir de bonnes feuilles tirées de l'ouvrage "Sass et Compass avancé" (280 pages) de Mehdi Kabab, publié chez Eyrolles.