johanBleuzen

Les feuilles de styles sont des documents sans aucune logique, ils ne gèrent pas les variables, ni les fonctions. Ainsi modifier une couleur dans une CSS nécessite de remplacer toutes les instances de la couleur dans le fichier au lieu de simplement modifier une variable en début de fichier. Heureusement, des outils pour le développement CSS existent pour ajouter quelques fonctionnalités qui manquent aux feuilles de style...

Vous le savez déjà, les CSS ne sont pas des fichiers dynamiques mais il existe plusieurs outils permettant de les rendre dynamiques au moins dans la phase de développement. Parmi les outils les plus connus, on peut citer CSSCaffold, ou encore Less (qui bénéficie également d'une application) et enfin le framework qui va nous intéreseer aujourd'hui, Sass.

Le framework Sass

Je ne vais pas trop entrer dans les détail techniques et lister toutes les fonctions, mais sachez que Sass est un framework qui permet de gérer dans des fichiers sources vos styles CSS en ajoutant les fonctionnalités manquantes tel que des variables, des fonctions, de l'héritage de sélecteurs, des snippets (appelés mixins). Il est possible de travailler avec des fichiers scss qui reprennent la syntaxe officielle des CSS ou alors avec des fichiers sass qui sont une version allégée des CSS puisqu'ils utilisent la notation Haml. La différence est assez légère mais elle permet de ne pas s'occuper des accolades ni des points virgules comme le montre le snippet suivant :

#mon_id
	background-color:red
	border: 1px solid black

	.ma_class_dans_mon_id
		color:white
		padding:5

Ce snippet ne sera pas compris pas votre navigateur mais il est au format Sass et c'est ce dernier qui s'occupera de le transformer en CSS compréhensible par les navigateurs. Ainsi vous devez développer vos sources Sass et laisser ce dernier générer vos fichiers CSS.

Le framework Compass

Compass est un framework de développement de CSS. Il facilite grandement le travail du développeur puisqu'il permet de facilement générer du code CSS. Par exemple, on utilise en général un fichier reset.css pour "nettoyer" les différentes propriétés des navigateurs. Compass fournit déjà un ensemble de mixins (fonctions) qui permettent de faciliter le développement de CSS. Par exemple, l'insertion du code de reset des css se fait avec un simple import :

@import "compass/reset";

Maintenant, imaginons que l'on veuille utiliser un effet de transparence sur un élément de la page. Voici le code à produire avec le framework Compass :

@import "compass/css3/opacity";

#monIdQuasiTransparent{
	@include opacity(0.1);
}

Ce snippet nécessite quelques explications, tout d'abord on importe le module 'opacity', ensuite il suffit d'inclure le mixin (la fonction) opacity pour l'assigner à l'ID de son choix. Avec ce snippet Compass va générer le CSS suivant :

/* line 4, ../src/styles.scss */
#monIdQuasiTransparent {
  opacity: 0.1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
}

Je vous rassure, ce n'est pas le seul snippet disponible avec Compass, il existe énormément de mixins disponibles, le framework possède une énorme documentation pour ces mixins. De plus, certains frameworks CSS très connus ont été portés en modules compatible avec Compass. En effet, l'application fourni un jeu de plugins avec le framework Blueprint, le framework de développement HTML5 Boilerplate et le framework de grid 960. Et enfin, le meilleur pour la fin, il est possible de porter un framework CSS pour le rendre compatible avec Compass, c'est par exemple le cas du framework Less.

Si jamais mes explications ne vous ont pas permis de comprendre le fonctionnement de Compass ce que je peux comprendre, voici une vidéo de présentation qui présente bien le framework :

Compass est un utilitaire Ruby, il nécessite des connaissances en Ruby pour l'installer. Pour l'utilisation ensuite tout se passe en ligne de commande pour générer un projet et observer des répertoire de fichiers SASS pour que Compass puisse les recompiler en CSS. Ce n'est pas forcément facile à prendre en mains pour tout le monde. Heureusement une application multi-plateforme existe pour simplifier l'utilisation de Compass.

L'application Compass.app

L'application est open-source mais ce n'est pas pour ça qu'elle est gratuite. L'auteur de l'application la partage gratuitement sur Github, mais vous devrez vous même la compiler avec JRuby et rawr. Compiler soi même l'application n'est pas compliqué mais nécessitera quelques prédispositions avec les lignes de commandes, je ne partagerai aucune information sur ce sujet.

J'ai testé l'application uniquement sur Mac OS, mais elle est multi-plateforme ce qui est un gros point fort de l'application. Une fois lancée, une nouvelle icône apparaît dans votre barre de menu, par défaut l'icone est noire car vous l'application n'observe pas de répertoire. L'observation d'un répertoire permet à Compass.app de compiler vos fichiers sources Sass en des fichiers compatibles pour les navigateurs à la volée, c'est à dire qu'à chaque sauvegarde d'un fichier sass, le fichier css associé est recompilé pour pouvoir vérifier le contenu dans votre navigateur.

Un fois que vous observez un répertoire, vous pouvez commencer à travailler, l'application se fait oublier tant qu'il n'y a pas d'erreur de compilcation dans vos sources. Comme je le disais précédemment, il faut également créer un projet pour que Compass puisse fonctionner, l'application permet de facilement le faire et de charger les différents modules que l'on souhaite utiliser. Cette application est vraiment un "helper" pour tirer parti du framework.

Conclusion

Comparé à l'application Less, celle de Compass est un peu moins bien pensée et semble moins "polished". Alors que Less apparait comme une popup à chaque erreur de compilation du fichier .less, Compass ne fournit aucun message, il faut surveiller un fichier de log qui indique les erreurs (avec un tail par exemple) ou alors il faut ouvrir manuellement le fichier pour voir si il y a une stacktrace qui indiquera qu'il y a une erreur. Autre point négatif avec l'application est son temps de chargement et sa consommation mémoire qui est presque deux fois plus grande que Less ce qui n'est pas négligeable pour un programme que l'on doit laisser fonctionner lorsque l'on développe.

Malgré ces quelques défauts l'application Compass est une bonne solution pour les gens ne voulant pas gérer Compass avec la ligne de commande. La courbe de progression de Compass est exponentielle, on galère un peu au début puis on maîtrise très vite le framework. L'application permet de faciliter l'adoption du framework.

Site de Compass.app : Site officiel Repository GitHub : Compass.app