Sass, compass, breakpoint et susy

Bon, entre l’éditeur Sublime Text et Emmet on pourrait penser qu’on a là de quoi faire, refaire et arborer la célèbre devise… YaPluKa… En fait, bien que cela nous ait déjà apporté énormément de confort d’écriture, ce n’est pas réellement complet.

S’il est vrai que l’on peut écrire et gérer facilement les codes de type ‘langage’, les CSS qui eux ne sont que des descriptions, ne bénéficient pas d’une telle souplesse d’organisation, d’automatisation ou tout autre philosophie propre aux langages de programmation et surtout orientés objet.

Alors là, il nous faut nous rapprocher d’un troisième larron en la personne du préprocesseur Sass.

Certains vous diront que Sass n’est pas la seule solution, qu’il existe des alternatives bien meilleures, comme Less, ou encore le presque feu Stylus… Certes… D’autres vous diront qu’au contraire, il ne faut pas utiliser de préprocesseur CSS du tout, ou alors leur préférer des alternatives post-processeurs… voir à ce sujet CSS pre- vs. post-processing pour avoir une bonne explication Pre/Post.

Bref, chacun y va de son approche, parfois trop subjective. Je n’entrerais donc pas dans ce débat, et je vous invite à vous faire votre propre idée sur le sujet en testant, expérimentant, produisant… bref, en commençant par les utiliser, puis juger par vous-même.

Mais au fait, un préprocesseur CSS et Sass c’est quoi ?

C’est la possibilité d’écrire un pseudo code apportant tous les avantages de la programmation et de pouvoir rapidement et simplement le compiler dans du CSS, interprétable par tous les navigateurs une fois écrit.

De ce fait, il est possible d’écrire des CSS en employant des variables, de l’encapsulation, des fonctions, d’user de notions d’héritage, des directives telles que @each, @if, et bien plus encore.

Suivez le guide sur le site officiel de Sass-lang. Vous pouvez tester l’ensemble des exemples directement sur Sassmeister, une console en ligne. Ensuite, pour aller plus loin, il faut installer Sass sur sa machine de production.

Installation

Pour installer Sass, il existe plusieurs manières, et, toutes ont leurs avantages et, bien sûr, leurs inconvénients. Parmi elles, on trouve des solutions toutes prêtes et encapsulées sous forme applicatives, CodeKit, Compass.app ou encore Hammer pour ne citer que celles-ci. Bien entendu d’autres existent, googlez sur le sujet.

En ce qui nous concerne, nous allons installez Sass sous Ruby en utilisant la console. Que l’on soit sous Mac ou PC cela reste identique, à ceci près que sous Mac OsX, Ruby est déjà installé.

Ruby sous Mac et sous Windows

Sous mac après avoir ouvert le terminal, il ne reste qu’à installer Sass, mais sous PC il faut commencer par installer Ruby. Pas de soucis, rendez-vous sur RubyInstaller et laissez-vous guider en pressant le bouton Download. Optez pour la dernière version correspondant à votre environnement (32bits ou 64 bits).

Il s’agit d’un simple exécutable qui va s’occuper de tout, y compris de préparer une console qui lancera directement Ruby lorsque nécessaire. Donc, une fois installé, recherchez Start Command Prompt with Ruby, et lancez-la.

Une fois dans la console, sous Mac (terminal) comme sous PC, il ne reste plus qu’à installer Sass. Rien de plus simple, tapez :

 gem install sass

Voilà c’est tout… pour de plus amples détails vous pouvez suivre l’installation complète sous Mac OsX et sous Windows

Sass est installé, ok, mais comment l’utiliser pour ses projets ?

Nous pourrions l’utiliser tel quel, mais il existe une librairie de mixins qui s’appuie sur Sass et surtout en simplifie grandement l’interfaçage. Il s’agit de compass. Du coup, avant d’aller plus loin, installons également compass. Cela se traduit encore par une ligne d’instructions à saisir dans la console ou le terminal :

 gem install compass

Une fois compass installé, et pour pouvoir commencer à travailler, il va nous falloir indiquer deux jeux d’instructions, qu’il nous faudra généralement répéter pour chacun de nos projet.

Le premier jeu d’instruction a pour pour objectif de créer un projet, de le nommer (nom du dossier de travail) et de le localiser sur le disque dur (chemin d’accès). Cette étape ne sera nécessaire qu’un seule fois lors de la création du projet.

 compass create chemin/access/au/dossier

Une alternative consiste à placer le terminal directement dans le dossier ad-hoc et ne taper que :

 compass create

Le second jeu d’instruction, sera utilisé pour demander à Sass de surveiller le dossier du projet afin de compiler le code à chaque fois que nécessaire. C’est-à-dire, lorsqu’un des fichiers Sass sera enregistré.

 compass watch chemin/access/au/dossier

ou, si la console pointe déjà sur le dossier, uniquement :

 compass watch

config.rb

Lors de la création du dossier projet par compass, un fichier config.rb a été créé et il contient toutes les informations d’organisation du projet (dossier) et sa hiérarchie. Pour le comprendre, le plus simple est de l’ouvrir et de le commenter. Dans le cadre de cet article nous ne détaillerons que les parties primordiales, ensuite rapprochez-vous de l’article Ruby-based Configuration Reference pour de plus amples et complètes informations.

   1 – css_dir  = "css"
   2 – sass_dir  = "sass"
   3 – images_dir  = "img"
   4 – line_comments  = false
   5 – output_style  = :compressed

1. indique le dossier de production des fichiers CSS générés
2. indique le dossier dans lequel nous allons placer les fichiers et partials pour générer le code CSS
3. indique le dossier image utilisé pour générer les arrières plans et les sprites
4. permet de ne pas employer de commentaires dans les fichiers générés
5. précise le format de sortie du code généré, généralement, :expanded en développement et :compressed en production

Assurez-vous que les dossiers sass et css soient bien vides, sinon, jetez tout ce qu’ils contiennent. Créez un fichier test.scss, placez le dans le dossier sass, puis remplissez le par :

 $fz : 62.5% ;
 body {
 	font-size : $fz;
 }

Enregistrez le, un fichier test.css devrait aussitôt être créé dans le dossier css et contenir :

 body {
 	font-size : 62.5%;
 }

Bon, l’exemple n’est pas phénoménal, mais il a le mérite de nous permettre de vérifier si tout fonctionne comme attendu. Il ne nous reste plus qu’à tester d’autres exemples, plus avancés, en s’inspirant des exemples précédemment vu dans le guide de Sass. N’hésitez pas à creuser la documentation Sass et celle de Compass Core Framework pour vous permettre de mieux couvrir l’étendue des possibilités.

Et côté Responsive Web Design alors ?

Beh, en fonction de votre approche, et surtout si vous travaillez en mode grille, là aussi Sass s’enrichi à merveille. Si vous n’utilisez pas de mode grille, jetez un œil sur ces quelques articles… All About Grid Systems, Grid-Based Web Design, Simplified ainsi que sur celui-ci Thinking Outside the Grid.

Ainsi, pour travailler en mode grille responsive (ou adaptative) sous sass, il nous faut ajouter deux nouveaux gems plus fantastique l’un que l’autre, breakpoint et susy. Juste quelques lignes de commandes de plus et nous y sommes :

 gem install breakpoint
 gem install susy

Il se peut qu’en fonction des versions bétas, ou autres divergences entre les gems, les dépendances entrent en conflits, entraînant un mauvais fonctionnement de l’ensemble. Si tel était le cas, pas d’inquiétude. Il suffit simplement de tout désinstaller et de reprendre l’installation en partant cette fois-ci à l’envers… Soit en installant d’abord susy, puis compass et enfin sass… bien entendu, avant d’installer chaque gem, vérifiez si la dépendance précédente ne l’a pas déjà installé.

 gem uninstall <nom_du_gem>
 gem list

Bon, ceci dit, prendre en main susy peut demander un peu de temps, et d’étude, mais une fois adopté, vous allez voir à quel point il devient beaucoup plus simple de mettre en place des affichages, qui peuvent être de plus en plus complexes. Vous pouvez aussi vous rapprocher de l’excellent travail de Zell Liew, Learning Susy, pour vous aider dans cette démarche.

Attention, si vous usez des possibilités apportées par ces deux gems dans votre code, il faudra alors en informer Sass : pour cela, il faut ajouter deux lignes dans le fichier config.rb. Au tout début du fichier, ajoutez simplement :

 require 'susy'
 require 'breakpoint'

Ruby et gems, d’autres possibilités

En vous rendant sur le site de rubygems.org, vous trouverez non seulement des dizaines et des dizaines de gems, mais aussi une mine d’informations sur leur gestion et leurs dépendances, dans les divers guides disponibles.

Et avec tout cela, on écrit comment nos CSS ?

Avant toute chose, on écrit soit en Sass (plus proche de la syntaxe ruby) soit en Scss (plus proche de la syntaxe CSS traditionnelle). Si vous optez pour la seconde possibilité, et que vous reprenez un site ancien déjà codé en CSS, rien ne vous empêche alors d’utiliser ces fichiers CSS, en redéfinissant leurs extensions en .scss, et de pouvoir ainsi travailler avec la capacité de Sass.

Bon, ceci dit, faites attention, SCSS n’est pas CSS, et il n’est pas rare d’avoir toute cette machinerie sous la main et de continuer à écrire les CSS à la mode des CSS. En fait, pour réellement tirer partie de Sass, il est important de penser objet et de voir les CSS de la sorte. Quitte, parfois, à employer un peu de classite aigüe, mais à bon escient cette fois-ci.

Pour nous aider à revisiter une approche de l’écriture et de l’architecture à apporter à notre vision des CSS, il peut être très intéressant de jeter un œil du côté de BEM, avec notamment le site BEM – Technology for creating web applications, ou l’article Scaling Down The BEM Methodology For Small Projects, ou encore le git de bem.

Vous pouvez également compléter ces lectures par des articles plus orientés Sass comme, Modular CSS with Sass & BEM, Support for BEM modules in Sass 3.3 ou tout simplement BEM Mixins.

Parlez de BEM est déjà une chose. Bien comprendre l’approche objet que l’on peut donner à l’écriture et la mise en place des CSS, en est une autre. De ce fait, il est important de faire un tour du côté de OOCSS, en commençant par l’article An Introduction To Object Oriented CSS (OOCSS), le site de Object-Oriented CSS et le git Object Oriented CSS.

Aller plus loin

Au travers de cet article concernant divers outils, il n’est pas possible de trop verticaliser sur un thème en particulier… et donc de pouvoir faire un tour qui serait exhaustif sur Sass, tant Sass, et compass, (avec ous sans autres ajouts) permettent d’aborder tout ou presque en ce qui concerne le code CSS et ses besoins… mais sachez que ces technos vous permettent de travailler la couleur de manière forte, Controlling color with Sass color functions ou Module: Sass::Script::Functions, de vous assurer d’améliorer par exemple le rythme vertical de vos contenus, ou encore de déléguer la gestion et l’organisation des sprites à Compass … et … bien plus encore.

Encore une fois le maître mot reste de pratiquer et d’utiliser Sass au quotidien, pour mettre en place ses propres mécaniques et réflexes. En complément, rapprochez-vous de sites comme The Sass Way, lisez l’article A Vision for Our Sass et suivez quelques conseils avisés d’organisation bien résumé sur 8 Tips to Help You Get the Best out of Sass, sur Sass (SCSS) Best Practices ou sur le site de Compass.