Compass : import, minification et variables

Il y a quelques temps, je vous expliquais comment installer Sass et Compass et créer son premier projet. Il s’agissait alors de démystifier le passage à la ligne de commande. Je n’avais pas encore eu l’occasion d’utiliser cet outil au sein d’un vrai projet, je m’étais donc gardé d’aller plus loin.

Entre-temps, j’ai commencé à m’y mettre en contexte de production et j’en profite donc pour aller un peu plus loin que mon précédent article.
Même si je n’ai pas encore exploré les fonctions complexes de ce pré-processeur, je peux déjà vous présenter les quelques fonctions que je me suis appropriées et qui me simplifient un peu la vie. 🙂

Inclure un fichier avec @import

Héritée de la règle @import en CSS, cette règle a philosophiquement le même effet en Sass : elle permet d’inclure un fichier Sass au sein d’un autre fichier Sass.

Mais il y a une différence de taille :

• En CSS, la règle @import permet de faire référence à un autre fichier CSS. On conserve 2 fichiers distinct.
• En Sass, la règle @import permet d’inclure directement le contenu du fichier CSS importé dans le fichier CSS qui contient la règle @import. Après compilation, on retrouvera donc 1 seul fichier CSS !

L’avantage est donc de pouvoir segmenter ses CSS tout en conservant en sortie un unique fichier CSS. En édition, le découpage modulaire de CSS permet une maintenance aisée. En production, la compilation en 1 seul fichier permet un gain de performance en réduisant le nombre de requêtes HTTP.

Cas pratique

Prenons l’exemple d’un fichier « styles » de base. On souhaite importer dans ce fichier les fichiers « reset », « structure » et « theme ». Mes fichiers seront donc :

• styles.scss
• _reset.scss
• _structure.scss
• _theme.scss

Pourquoi un tiret bas (_) devant les noms des fichiers importés ? C’est la nomenclature permettant de spécifier qu’il s’agit de feuilles de styles « partielles ». L’intérêt est d’éviter la compilation de ces fichiers.
En effet lors de la compilation du projet, tous les fichiers SCSS sont compilés par défaut en un fichier CSS équivalent. Ajouter un tiret bas en préfixe permettra d’ignorer ces fichiers et de ne pas créer de fichier CSS en sortie.

J’ai donc mes différents fichiers. Il suffit d’importer tous mes fichiers partiels dans le fichier « styles » comme suit :

@import 'reset';
@import 'structure';
@import 'theme';

Et voilà, une fois compilé, nous avons un seul fichier styles.css qui contiendra les contenus de l’ensemble de mes fichiers de base. 🙂

Minification

Ce n’est pas vraiment la raison pour laquelle on choisit un pré-processeur car de nombreux outils permettent de faire ces opérations. Cependant, à partir du moment où on utilise un outil comme Compass, on aurait tort de ne pas profiter de cette option. Surtout que ça fait gagner du temps. 🙂

Lors de la compilation du fichier, on peut définir le format de sortie souhaité.
La première méthode est de définir un format de sortie par défaut dans le fichier de configuration du projet : config.rb

Lors de la création du projet, ce fichier est créé avec plusieurs lignes de paramétrages commentées. Pour définir le format de sortie à la compilation, il faut se pencher sur cette ligne :

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

Comme vous pouvez le voir, 4 formats de sortie sont possibes :

• :expanded est le format par défaut classique : Les règles sont indentées au même niveau et il y a une propriété par ligne.
• :nested est une « version Sass » du mode expanded : Le format est globalement le même, sauf au niveau de l’indentation des règles. Elles sont indentées en fonction de la profondeur des sélecteurs, ce qui permet de visualiser la profondeur de l’arborescence des sélecteurs.
• :compact est une version semi-compressée : Le sélecteur et ses propriétés sont sur une ligne.
• :compressed sort un code minifié et dépourvu de tout commentaire.

On peut donc minifier automatiquement son CSS au moment de la compilation, sans avoir à utiliser un autre outil. 🙂

Je vous ai présenté là la méthode automatique, à l’aide des paramètres du fichier de configuration du projet. Mais on peut aussi effectuer une compilation manuelle du projet à l’aide de la ligne de commande suivante :

compass compile --output-style compressed

Ça a beau ne pas être la fonction phare des pré-processeurs, il n’en reste pas moins qu’elle est très pratique et a l’avantage de s’intégrer de manière transparente au processus de création des CSS.

Variables

Un autre avantage mis en avant par tous les pré-processeurs, la possibilité de pouvoir utiliser des variables. À l’instar des langages de programmation, on peut ni plus ni moins déclarer des variables qu’on pourra ensuite appeler n’importe où dans nos fichiers de styles.

Le cas d’utilisation que j’ai mis en pratique, sans doute le plus évident pour beaucoup, est la gestion des couleurs et des éléments purement décoratifs qu’on peut assimiler au « thème ».

Le premier site sur lequel je mets en application ces variables est Agora HD (version en cours de développement). L’équipe du site organise souvent des concours avec le support d’éditeurs plus ou moins importants. Forcément, quand un éditeur s’implique il s’attend à un minimum de mise en valeur pour les lots qu’il fourni généreusement. J’ai donc à de nombreuses reprises fait un thème aux couleurs des concours organisés.
Je m’étais alors fait une feuille de thème avec toutes les déclarations que je modifiais systématiquement pour créer un thème, en écrasant celles présentes dans les fichiers de style principaux. En termes de maintenance ce n’était pas du tout insurmontable mais je devais quand même effectuer un certain nombre de changement de valeurs dans le CSS de mon thème.

Avec Compass, je définis dès le départ une variable pour chaque couleur ou élément visuel qui seront modifiés pour un thème. Je n’aurai plus qu’à changer chacune de ces variables au besoin. 🙂

Cas pratique

Pour déclarer une variable, rien de bien compliqué. Par exemple pour déclarer la « variable » dont la valeur est la couleur blanche :

$variable: rgba(255, 255, 255, 1);

Il suffit ensuite d’appeler cette variable où on le souhaite dans les feuilles de styles :

body {
  color: $variable;
}

Et hop, plus de prise de tête pour changer toutes les couleurs du thème. Il suffit de mettre à jour les variables et le tour est joué. 😀

À votre tour

Voilà pour les quelques premières possibilités que j’ai décidé d’exploiter, pour commencer. 🙂
Vous remarquerez que ça ne bouleverse pas énormément mes habitudes de travail, c’est donc une façon simple de se mettre aux pré-processeurs.

Étant personnellement favorable à l’apprentissage progressif (on ne devient pas expert du jour au lendemain ;)), le fait que Sass et Compass soient totalement compatibles avec du CSS écrit de manière classique est un réel avantage. On peut très bien commencer à utiliser un pré-processeurs et insérer son utilisation naturellement dans nos habitudes, sans lâcher du jour au lendemain notre CSS écrit à la main