Sass

&

Compass
avancé

Optimiser ses feuilles de styles CSS

Mehdi Kabab
Préface de Raphaël Goetter


Sass & Compass
avancé

Grâce à Sass et à son framework CSS3 Compass, les intégrateurs et développeurs web professionnels
confrontés à des impératifs de productivité et de maintenabilité disposent enfin d’outils libres pour écrire
de façon cohérente leurs feuilles de styles CSS.
Sass, un must pour optimiser l’écriture des feuilles de styles CSS
Porté par une communauté très active, le préprocesseur libre Sass offre un arsenal de fonctions pour la productivité
du développeur front-end : code CSS allégé et simplifié lors de la phase de développement, variables, mixins, fonctions,
placeholders, concaténation, validation de code à la volée… Facilitant la mise en œuvre des principes DRY et KISS, l’outil
permet de concevoir des arborescences de projets extrêmement robustes. L’organisation logique en plusieurs fichiers permet
un travail d’équipe efficace, à condition de s’assurer que tous les protagonistes se dotent de versions identiques des outils.
Compass, le framework CSS3 pour Sass, permet d’assurer la compatibilité du site, quel que soit le navigateur, marquant
la fin des longues sessions de débogage sous Internet Explorer. Il embarque un générateur d’images de sprites CSS auquel
tout un chapitre est dédié : la génération d’images de sprites haute définition n’aura jamais été aussi simple !

Une référence méthodologique pour l’intégrateur web
Écrit par l’un des pionniers de l’utilisation de Sass/Compass et préfacé par Raphaël Goetter, fondateur d’Alsacreations.fr,

cet ouvrage est un must pour l’intégrateur web qui souhaite acquérir les meilleures pratiques d’écriture CSS et les
compétences en programmation nécessaires à la maîtrise de Sass.

Mehdi Kabab
Expert front-end pour
le cabinet d’expertises
Clever Age (Lyon), Mehdi
Kabab est aussi développeur
web. Son expertise l’amène
à intervenir sur tout type
de projet : de l’intégration
one shot jusqu’aux solutions
CMS complexes. Auteur
d’un ouvrage sur Gimp,
il attache une attention
particulière au partage
des connaissances, et fut
chargé pendant deux ans
du cours de graphisme libre
de la licence professionnelle
Communication, logiciels libres
et sources ouvertes (CoLibre)
à l’université Lumière Lyon 2.
Retrouvez-le sur Twitter
@piouPiouM !

Au sommaire
Installation de Sass et Compass • Installer Sass, Compass… et Ruby ? • Environnements graphiques disponibles • Première conversion d’un fichier Sass en feuille CSS • Syntaxes de Sass • Deux choix de syntaxe : Sass et SCSS • Imbriquer

– Au développeur-intégrateur qui cherche à s’approprier le préprocesseur CSS Sass et son framework CSS3 Compass ;

– À l’intégrateur expérimenté qui souhaite optimiser sa méthode de travail pour garantir la maintenabilité de ses sites ;
– Au chef de projet qui cherche à s’assurer que tous les intervenants d’un projet travaillent avec les mêmes outils.

@

Téléchargez le code source des exemples
sur le site d’accompagnement du livre


Conception : Nord Compo

À qui s’adresse cet ouvrage ?

Code éditeur : G13677
ISBN : 978-2-212-13677-7

les règles • Différents niveaux de commentaires • Variables • Diviser et être plus efficace • Réutiliser son code :
introduction aux mixins • Passage d’un bloc de contenu à un mixin • Héritage avec @extend • Maîtriser l’héritage avec
les placeholders • Support des Media Queries • Pièges à éviter • Développer avec Sass • Sass et les données • Des
mathématiques dans vos CSS • Directives de contrôle • Manipulations avancées avec les fonctions • Premier projet Sass
et contraintes de production • Initialiser l’arborescence du projet • Compiler un projet Sass • Utiliser des bibliothèques
Sass • Initialisation de projet facile avec Compass • Compass centralise la configuration du projet • Compiler un projet
Compass • Utiliser des bibliothèques Sass dans un projet Compass • Compass, votre futur meilleur ami • Accès simplifié
aux ressources statiques • Une boîte à outils DRY • Un framework CSS3 • Support multinavigateur (cross browser) •
Création de sprites CSS avec Compass • Qu’est-ce qu’un sprite CSS ? • Les sprites, une nécessité • La magie de Compass
pour la génération de sprites • Maîtriser les sélecteurs • Optimiser ses sprites • En finir avec des compilations trop
longues • Gérer un projet Compass : un peu de méthodologie • De la bonne gestion des versions de Sass et Compass •
Déboguer un projet Sass • Travailler en équipe • Configuration avancée avec Compass • Maintenir un casseur de cache
personnalisé • Afficher des notifications Growl sous Mac OS X • Partager des fichiers entre plusieurs projets • Guide
de survie de l’interface en ligne de commande • L’invite de commandes • Lister les fichiers • Se déplacer dans le système

de fichiers • Manipuler les fichiers • Motifs de remplacements.


Sass

&

Compass
avancé

Optimiser ses feuilles de style CSS


Chez

Dans

Dans

le même éditeur

la collection

la collection

Dans

Design

web


A Book Apart

la collection

Mémento

Retrouvez aussi nos livres numériques sur


pII_Kabab.indd 1

30/09/13 09:25


Sass

&

Compass
avancé

Optimiser ses feuilles de style CSS

Mehdi Kabab
Préface de Raphaël Goetter


ÉDITIONS EYROLLES
61, bd Saint-Germain

75240 Paris Cedex 05
www.editions-eyrolles.com

En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage,
sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie,
20, rue des Grands Augustins, 75006 Paris.
© Groupe Eyrolles, 2013, ISBN : 978-2-212-13677-7

Copyright_Kabab.indd 1

30/09/13 09:26


Préface
de Raphaël Goetter
Quand les spécifications CSS sont nées en 1996, durant la préhistoire du Web, elles
étaient volontairement élaborées pour un public de designers web, avec pour directive
de constituer un langage aussi simple et intuitif que possible. Cet impératif de simplicité a également été cause de leurs principales lacunes : pas de variables, pas de
boucles, pas de fonctions ni de conditions en CSS.
Mais ça, c’était avant.
Le Web a beaucoup évolué depuis les années 1990, les méthodes et les outils de production ont progressé pour s’adapter à des contraintes nouvelles. Mon métier d’intégrateur HTML, soumis lui aussi à cette implacable sélection darwinienne, fluctue
petit à petit pour devenir le métier plus polyvalent de développeur front-end.
Même le simpliste CSS s’est complexifié au cours de ses versions 3 et 4 en brouillon :
amusez-vous à produire des matrices et perspectives au sein des transformations et
rotations CSS 3D, et vous comprendrez ce que je veux dire.
Durant ces dernières années est apparu un panel impressionnant d’outils permettant
de faciliter et d’accélérer notre travail quotidien d’intégrateur, notre fameux
workflow : des gestionnaires de contenu (CMS), des frameworks JavaScript et CSS,
des éditeurs de texte de plus en plus sophistiqués, et surtout des préprocesseurs CSS
– codes produisant du code – destinés à pallier les faiblesses du langage CSS.

Je suis pour ainsi dire un adepte de CSS de la première heure. Un dinosaure en quelque
sorte. En tant que tel, ma première réaction envers les préprocesseurs fut celle de la
méfiance. Je leur prêtais moult inconvénients : ce n’est pas du vrai CSS ; pire, ça dénature CSS (oui, moi je fais du vrai CSS), ça produit une « soupe » de code, ça rajoute un
niveau de complexité, etc.


VI

Sass et Compass

Ajoutez cela que je ne supporte guốre la lecture des rốgles imbriquộes dans les prộprocesseurs (je trouve ỗa bien plus fastidieux lire), que je suis allergique la ligne de commande et que je suis parfois de mauvaise foi !
Pour autant, il faut parfois savoir prendre du recul et se rendre lộvidence : si ces
outils existent et se dộmocratisent, cest bien quils rộpondent un besoin. Et ce
besoin est simple : contourner certaines contraintes modernes de dộlais et de rendement sans perdre en qualitộ de production.
De nombreuses idộes reỗues (et fausses) circulent autour des prộprocesseurs CSS. Jai
appris en surmonter quelques-unes partir du moment oự jai assimilộ trois points
essentiels les concernant :
1 Un prộprocesseur nest ni du CSS ni une extension de CSS, il produit simplement
du CSS.
2 Un prộprocesseur ne produit pas forcộment du code sale, il ne fait que ce que vous
lui dites de faire.
3 (Corollaire du 2.) Si vous ne connaissez pas bien CSS, un prộprocesseur produira
du code sale.
Nul doute que chacun de nous sache sadapter au changement et pratique sa veille quotidienne. Les prộprocesseurs CSS, bien employộs, peuvent devenir redoutablement
efficaces une fois intộgrộs dans notre flux de production moderne. Et si, en plus, lun
deux parvient me construire des sprites CSS automatiquement sans que jaie
marracher un seul cheveu, comme le fait dộj Compass, cest moitiộ gagnộ pour moi !
Le livre de Kaelig (Deloumeau-Prigent) ma donnộ envie de tester des prộprocesseurs
et de jouer avec ; celui de Mehdi ma ouvert les yeux sur lộvidence de les employer
rộguliốrement dans mon travail dintộgrateur.

Sass et Compass sont aujourdhui des produits mỷrs portộs par une communautộ trốs
riche, et leurs bộnộfices vont comme moi vous paraợtre ộvidents : code CSS extrờmement allộgộ et simplifiộ lors de la phase de dộveloppement, variables, fonctions, prộfixes, concatộnation, correction et validation de code la volộe Autant de fonctionnalitộs dộsormais automatisộes qui ne perturberont plus votre routine journaliốre de travail.
Je suis heureux que louvrage de Mehdi soit publiộ et men apprenne plus sur ces
outils inộvitablement appelộs devenir les compagnons fidốles de notre quotidien.
Raphaởl Goetter
www.goetter.fr

fondateur dAlsacrộations


Table des matières
Avant-propos ................................................................................. 1
Pourquoi ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
À qui s’adresse cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Structure de l’ouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

CHAPITRE 1
Installation de Sass et Compass................................................... 5
Installer Sass, Compass… et Ruby ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Installation sous Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Ouvrir le terminal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Mettre à jour les paquets Ruby (RubyGems) . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
En cas de problème sous Mac OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Installation sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Ouvrir l’invite de commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installer Ruby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Installation sous Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Environnements graphiques disponibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
L’environnement Compass.app pour Linux, Windows et OS X . . . . . . . . . . . . 15
Le compilateur Scout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Prepros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CodeKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Mixture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Première conversion d’un fichier Sass en feuille CSS . . . . . . . . . . . . . . . . . . . . . . 17
Session interactive de Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20


VIII

Sass et Compass

CHAPITRE 2
Une syntaxe de Sass .................................................................... 21
Deux choix de syntaxe : Sass et SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
De CSS à SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Imbriquer les règles, une révolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Sélecteur parent & . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Imbriquer les groupes de sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Sélecteurs avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Les propriétés imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Différents niveaux de commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Les commentaires silencieux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Conserver les commentaires de licence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Déclarer et utiliser une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Portée d’une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Portée locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Écraser une variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Variable globale ou locale ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Interpoler une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Diviser et être plus efficace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Les feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Mise en pratique des feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . . 46
Importations imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Limites de l’instruction @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Définir des variables par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Réutiliser son code : introduction aux mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Définir un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Appeler un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Règles CSS dans les mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Passage d’arguments à un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Arguments par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Liste d’arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Passage d’un bloc de contenu à un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Héritage avec @extend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Utiliser l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Du bon usage de l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Implications pour les règles imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Création de sélecteurs nuisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Maîtriser l’héritage avec les placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74


Table des matières

Usage avancé des placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Support des Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Imbriquer les Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Des variables pour être lisible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Media Queries avancées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Les pièges à éviter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Syndrome de l’imbrication aiguë . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
La règle de l’inception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Héritages complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Consolider à tort un héritage par placeholder . . . . . . . . . . . . . . . . . . . . . . . . . 89
Ordre d’apparition des placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

CHAPITRE 3
Développer avec Sass.................................................................. 93
Sass et les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Les principaux types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Les valeurs numériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Les couleurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Les booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Connaître le type d’une donnée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Le cas particulier de la valeur nulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Des mathématiques dans vos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Comparaison de valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Opérations numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Opérations avec des unités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Opérations sur les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Opérations sur les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Opérations booléennes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Les directives de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Les tests conditionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Les boucles @for et @while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Les itérations de listes avec @each . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Manipulations avancées avec les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Fonctions sur les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Fonctions numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Fonctions sur les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Fonctions RGB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

IX


X

Sass et Compass

Fonctions HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Fonctions d’opacité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Autres fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Fonctions sur les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Fonctions d’introspection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Fonctions utilitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Fonctions personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

CHAPITRE 4
Premier projet Sass et contraintes de production.................. 123
Initialiser l’arborescence du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Arborescence type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Initialisation rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Le cas des mixins tierce partie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Renforcer la structure du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Penser « modulaire » : l’exemple de SMACSS . . . . . . . . . . . . . . . . . . . . . . . . 134
Principe de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
SMACSS appliqué à Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Compiler un projet Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Compilation manuelle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Compilation automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Utiliser des bibliothèques Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Initialisation de projet facile avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Créer un nouveau projet Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Transformer un projet existant en projet Compass . . . . . . . . . . . . . . . . . . . . 148
S’appuyer sur un fichier de configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Compass centralise la configuration du projet . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Anatomie d’un fichier de configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Options disponibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Fichier de configuration type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Compiler un projet Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Compilation manuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Compilation automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Utiliser des bibliothèques Sass dans un projet Compass . . . . . . . . . . . . . . . . . . . 158
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158


Table des matières

CHAPITRE 5
Compass, votre futur meilleur ami.......................................... 159

Accès simplifié aux ressources statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Ne perdez plus vos images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Récupérer les dimensions d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Embarquer des images dans la feuille de styles . . . . . . . . . . . . . . . . . . . . . . . 164
Compass, une boîte à outils DRY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Une documentation riche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Déterminer quels fichiers importer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Compass, un framework CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
La guerre des préfixes, un lointain souvenir . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Les grands classiques de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Coins arrondis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Ombres portée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
@font-face facile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Un module d'image très complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Un support cross-browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Un outil à l'écoute du marché . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Un support cross-browser paramétrable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Compass, ou comment oublier Internet Explorer . . . . . . . . . . . . . . . . . . . . . 182
Génération automatique de hacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Désactiver le support d’Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

CHAPITRE 6
Création de sprites CSS avec Compass .................................... 185
Qu'est-ce qu'un sprite CSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Les sprites, une nécessité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Accélérer le chargement de la page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Créer une sprite map n'est pas une sinécure . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Compass, ce super-héros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
La magie de Compass pour la génération de sprites . . . . . . . . . . . . . . . . . . . . . . 189

Créer une sprite map CSS avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Générer les sprites CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Paramétrer une sprite map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Augmenter l'espace autour des sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Préciser les dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Configurer la position. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Des positions exprimées en pourcentages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Répéter un sprite horizontalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

XI


XII

Sass et Compass

Configurer le nom de la classe de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Choisir l'agencement optimal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Ordonner les images dans la sprite map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Intégrer la sprite map via Data-URI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Gestion automatique des pseudo-classes CSS . . . . . . . . . . . . . . . . . . . . . . . . 203
Maîtriser les sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Des sprites aux petits oignons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Exemple 1 : personnaliser les sélecteurs des sprites . . . . . . . . . . . . . . . . . . . . 213
Exemple 2 : supprimer la répétition des dimensions . . . . . . . . . . . . . . . . . . . 214
Exemple 3 : des sprites CSS en haute définition . . . . . . . . . . . . . . . . . . . . . . 217
Exemple 4 : déclarer les dimensions des sprites par taille d’image . . . . . . . . . . 221
En finir avec des compilations trop longues . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Origine du problème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

CHAPITRE 7
Gérer un projet Compass :
un peu de méthodologie .......................................................... 229
De la bonne gestion des versions de Sass et Compass . . . . . . . . . . . . . . . . . . . . 230
Problèmes rencontrés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Le gestionnaire de paquets Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Déclarer les gems d’un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Installation de Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Installer les gems propres au projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Cycle de vie des gems d’un projet avec Bundler . . . . . . . . . . . . . . . . . . . . . . . 236
Partager son projet géré par Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Déboguer un projet Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Exploiter les informations de débogage de Sass . . . . . . . . . . . . . . . . . . . . . . . 239
Focus sur une solution en devenir : Source Maps . . . . . . . . . . . . . . . . . . . . . . 242
Activer le support de Source Maps dans Sass . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Activer le support de Source Maps dans Compass . . . . . . . . . . . . . . . . . . . . . . 244
Activer le support de Source Maps dans le navigateur . . . . . . . . . . . . . . . . . . . 245
Exploiter les Source Maps du préprocesseur dans le navigateur . . . . . . . . . . . . 247
Travailler en équipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Stratégies de gestion des styles CSS générés . . . . . . . . . . . . . . . . . . . . . . . . . 252
Stratégie 1 : versionner les styles CSS compressés . . . . . . . . . . . . . . . . . . . . . 252
Ciel, un conflit ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Stratégie 2 : utiliser un script de déploiement . . . . . . . . . . . . . . . . . . . . . . . . 254
Documentez ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257


Table des matières


ANNEXE A
Configuration avancée avec Compass ..................................... 259
Maintenir un casseur de cache personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Afficher des notifications Growl sous Mac OS X . . . . . . . . . . . . . . . . . . . . . . . 262
Partager des fichiers entre plusieurs projets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Mise en œuvre avec Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Mise en œuvre avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

ANNEXE B
Guide de survie de l’interface en ligne de commande .......... 269
L’invite de commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Lister les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Faciliter la lecture de la liste de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Afficher les fichiers cachés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Se déplacer dans le système de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Revenir dans son répertoire personnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Remonter dans l’arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Alterner entre deux emplacements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Manipuler les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Créer un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Créer un répertoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Copier des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Déplacer des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Supprimer des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Motifs de remplacements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Index........................................................................................... 281

XIII




Avant-propos
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.
Le préprocesseur connaît un regain d’intérêt en 2008 lorsque Chris Eppstein (http://
chriseppstein.github.io/) 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
(voir chapitre 7) 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.



2

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 !

Pourquoi ce livre ?
Les préprocesseurs CSS tels que Sass séduisent de plus en plus d’acteurs du Web. Mais
force est de constater que l’outil et son framework CSS3 Compass sont souvent mal
utilisés, faute d’ouvrages et d’articles de référence. Ces usages maladroits conduisent à
des feuilles de styles excessivement complexes, lorsqu’elles ne vont pas jusqu’à rendre
impossible toute évolution d’un projet à cause d’une cascade CSS mal maîtrisée.
Ayant intégré dès 2010 Sass et Compass à ma boîte à outils de développeur frontend, j’ai eu l’occasion de les utiliser dans de nombreux projets. Le travail dans une
agence web comme Clever Age m’a permis d’exploiter ces deux outils dans des circonstances diverses et variées, allant du simple site statique à la création de plusieurs
thèmes complexes pour des sites multilingues propulsés par Drupal.
Fort de ces expériences, et des enseignements que j’ai pu tirer de mes erreurs, je vous
propose dans cet ouvrage de partager mon savoir-faire, afin je l’espère de vous aider à
tirer le meilleur de Sass et Compass, pour produire un code maintenable et éviter les
pièges de certaines fonctionnalités à double tranchant, que sont l’imbrication ou
l’héritage des règles CSS.
Clever Age
Clever Age est un cabinet d’expertises qui se positionne sur l'ensemble de la chaîne
de production web depuis plus de 10 ans. Cette couverture 100% digitale, ainsi que
ses références, en font un prestataire majeur du marché francophone. La société privilégie un usage pragmatique des technologies du Web, appliquant les bonnes pratiques techniques et méthodologiques sur les standards, l'ergonomie et l'accessibilité,
la performance, la capitalisation.

B />

Avant-propos

À qui s’adresse cet ouvrage ?
Le soin apporté à ce livre le rendra accessible aux débutants, auxquels on explique les
premières étapes d’installation et de prise en main, mais il s’adresse surtout :
• au développeur-intégrateur qui cherche à s’approprier le préprocesseur CSS et
son framework CSS3 ;
• à l’intégrateur expérimenté qui souhaite optimiser sa méthode de travail ;
• au chef de projet qui cherche à s’assurer que tous les intervenants d’un projet travaillent avec les mêmes outils.

Structure de l’ouvrage
Le livre est découpé en sept chapitres.
• Tout d’abord, le chapitre 1 présente la démarche d’installation de Sass et de Compass en fonction des différents systèmes d’exploitation que sont Mac OS X, Linux
ou encore Windows. Des alternatives graphiques sont également proposées. L’installation est suivie d’une première prise de contact avec le préprocesseur CSS.
• Le chapitre 2 est dédié à la syntaxe de Sass, dont on découvrira la richesse : notation imbriquée des règles, placeholders, etc.
• Le chapitre 3 traite du développement avec Sass. En effet, le préprocesseur
apporte son lot d’instructions qui l’élèvent au statut de langage de programmation. Apprenez à manipuler efficacement les différents types de données de Sass
pour aborder vos projets avec une approche systématique de non-redondance
(DRY, Don't Repeat Yourself).
• Le chapitre 4 explique comment créer un premier projet Sass, et surtout comment penser une arborescence robuste pour minimiser ses temps de maintenance.
On y introduira Compass, le framework CSS3 pour Sass, et son fichier de configuration qui facilite la vie d’un projet.
• Le chapitre 5 est dédié à la présentation du framework Compass. De la capacité à
gérer l’accès aux ressources statiques au support multinavigateur, Compass
apporte son lot non négligeable de commodités.
• Le chapitre 6 s’étend sur un outil particulièrement utile alors que les performances des sites sont de plus en plus critiques : le générateur de sprites CSS de Compass – la manipulation des sprites map n’aura plus de secret pour vous et maintenir
des sprites haute définition n’aura jamais été aussi simple.
• Enfin, le chapitre 7 donne des pistes pour organiser et maintenir un projet Sass
ou Compass… en équipe ! Il y sera aussi question de débogage, notamment avec

l’introduction du support de Source Maps dans Sass.

3


4

Sass et Compass

Il nous a paru utile de compléter ces chapitres avec deux annexes.
• L’annexe A propose des éléments de configuration avancée pour vos projets
Compass.
• L’annexe B, quant à elle, présente les bases de la manipulation de l’interface en
ligne de commande, outil indispensable pour qui voudrait exploiter efficacement
Sass et Compass.
RESSOURCES Code source des exemples du livre
Le code source des exemples du livre peut être téléchargé depuis le site dédié à
l’ouvrage. Les mises à jour de code sont disponibles depuis le dépôt GitHub.
B
B />
Remerciements
Mes remerciements vont tout d’abord aux développeurs de Sass et de Compass qui ont
littéralement révolutionné mes méthodes de travail. Merci à Hampton Catlin, Nathan
Weizenbaum et Chris Eppstein et à tous les contributeurs pour votre formidable travail !
Je remercie Kaelig Deloumeau-Prigent pour m’avoir intégré à l’équipe de relecteurs
de son ouvrage CSS maintenables avec Sass & Compass (publié aux éditions Eyrolles).
Cette expérience fut le déclic qu’il me manquait pour me lancer dans la rédaction
d’un ouvrage dédié à Sass et Compass.
Muriel, des éditions Eyrolles, pour avoir cru en moi et pour sa bonne humeur et
toute l’équipe : Sophie, Géraldine, Laurène et Gaël.

Je n’oublie pas mes collègues de Clever Age Lyon qui ont intégré Sass et Compass à
leur boîte à outils, après que je leur ai présentés à mon arrivée dans l’agence en 2010.
Ils ont ainsi pu confirmer mon choix technique de l’époque.
Pour terminer, je remercie les relectrices Marie Guillaumet et Corinne Schillinger
qui ont habilement usé de la Force pour corriger mon élocution à la Yoda mais, surtout, mis à contribution leur expertise pour améliorer cet ouvrage. Et merci à
Raphaël Goetter pour la préface !
Bien sûr, je n’oublie pas les amis de Yelp Lyon qui ont su comment booster ma motivation (vous avez dit glaces ?).
Enfin, merci à Marie, mon rayon de soleil permanent qui a illuminé mes séances de
travail et qui a assumé mes longs mois d’indisponibilité.
Mehdi Kabab
/>

1
Installation de Sass et Compass
L’installation de Sass et Compass ne pose aucune difficulté – y compris pour
ceux qui sont peu habitués aux outils en ligne de commande, à condition qu’ils
ne se laissent pas impressionner.

SOMMAIRE

B Installer Sass et Compass en ligne de commande
B Choisir une alternative graphique
B Transformer un fichier Sass en fichier CSS


6

Sass et Compass

Ce chapitre vous guidera pas à pas dans l’installation en ligne de commande du préprocesseur Sass et de son framework CSS3. Une fois Sass installé, vous verrez comment transformer très simplement un premier fichier Sass en feuille de styles depuis

le terminal.

Installer Sass, Compass… et Ruby ?
PERFORMANCES Sass et Compass : alternatives graphiques versus ligne de commande
Qu’on se le tienne pour dit, c’est lorsqu’ils sont exécutés en ligne de commande (depuis un terminal ou
shell) que Sass et Compass donnent le maximum d’eux-mêmes. Si vous appréhendez cette facette de
l’outil, n’ayez crainte, des alternatives graphiques seront tout de même proposées plus loin.

Sass et Compass sont des outils en ligne de commande écrits en Ruby et construits
au-dessus de ce langage de programmation. Pour en tirer toute la puissance, Ruby
doit être installé sur votre machine.
REMARQUE Sass sans Compass ?
Avant de poursuivre, je tiens à préciser que si vous n’êtes intéressé que par Sass, et non par Compass, ce
dernier n’est pas obligatoire pour utiliser le préprocesseur. Et pour cause, Compass n’est qu’un framework qui existe grâce à Sass.

VERSION Sass 3.2.x et Compass 0.12.x et nouveautés des 3.3 et 0.13 (respectivement)
Les versions de Sass et de Compass utilisées dans cet ouvrage sont celles qui sont stables et disponibles
au moment de l’écriture, à savoir :
• la version 3.2.10 pour Sass ;
• la version 0.12.2 pour Compass.
Nous présentons cependant certaines fonctionnalités qui n’en sont encore qu’à l’état de développement
ou qui sont déjà intégrées à la version de développement des deux outils. Dans ce cas, les versions utilisées sont les suivantes :
• la version 3.3.0.alpha.229 pour Sass ;
• la version 0.13.alpha.4 pour Compass.

Installation sous Mac OS X
Ruby est intégré dans Mac OS X, inutile donc de l’installer. Vous pouvez directement passer à l’installation de Sass et de Compass.


Installation de Sass et Compass

CHAPITRE 1

Ouvrir le terminal
Pour commencer, ouvrez un terminal depuis le Finder. Pour ce faire, double-cliquez
sur l’icône Terminal située dans le dossier Applications>Utilitaires.
Figure 1–1

Lancer l’application Terminal

ALLER PLUS LOIN Se familiariser avec la ligne de commande
Si vous n’êtes pas à l’aise avec la ligne de commande, consultez l’annexe B qui présente les commandes
essentielles à un usage quotidien. Nous recommandons également l’ouvrage avancé sur Mac OS X comportant une annexe sur l’utilisation de la ligne de commande :
R Guillaume Gète, OS X Mountain Lion efficace, Eyrolles, 2013

Mettre à jour les paquets Ruby (RubyGems)
Si vous ne l’avez jamais fait, il serait bon de mettre à jour RubyGems, le gestionnaire
de paquets (gems) pour Ruby. Pour ce faire, exécutez dans le terminal la commande
suivante.
Mise à jour de RubyGems
$ sudo gem update --system

B />
7


8

Sass et Compass

Installer Sass et Compass depuis RubyGems

Sass et Compass sont eux aussi livrés sous la forme de paquets, ou gems. Issue du
projet RubyGems, l’installation d’une gem nommée <name> est simple :
$ gem install <name>

B.A.-BA Faut-il saisir le caractère « $ » ?
Tout au long de cet ouvrage, nous rappelons en début de chaque ligne de commande saisie par l’utilisateur le symbole dollar $, pour deux raisons :
1. Pour tous les systèmes de type *nix — comme Linux, Unix, Mac OS X — il est internationalement convenu de différencier les commandes lancées par l’utilisateur courant de celles qui sont exécutées en
ayant obtenu les privilèges du super-utilisateur de la machine, j’ai nommé root. Dès lors, le caractère
dollar $ identifie l’utilisateur courant (vous) et le caractère dièse # le super-utilisateur (ce même caractère utilisé pour écrire un hashtag sur les réseaux sociaux).
2. La présence du symbole facilite la lecture des sessions de travail dans le terminal. Grâce à lui, les commandes saisies se détachent visuellement des messages produits.
La réponse est donc non, il ne faut pas saisir le symbole $, sous peine de voir s’afficher le message :
bash: $: command not found.

Installation de Sass
$ gem install sass
Fetching: sass-3.2.10.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions into the
/Library/Ruby/Gems/1.8 directory.

Comme dans l’exemple ci-dessus, il peut cependant arriver que la commande échoue,
suite à un problème de permissions d’écriture dans le dossier où sont stockées les gems
du système. Si tel est le cas, préfixez simplement la commande avec l’instruction sudo.
Votre mot de passe utilisateur vous sera alors demandé (invite Password:).
Je ne préciserai jamais l’instruction sudo car il faut l’utiliser avec parcimonie, par
exemple lorsque l’outil n’a pas suffisamment de droits de lecture ou d’écriture. Malheureusement, beaucoup d’utilisateurs y ont recours à tort et à travers, au point de
rendre leur système instable.


Installation de Sass et Compass

CHAPITRE 1

Figure 1–2

Installation de Sass et Compass
depuis le terminal

Ainsi, l’installation de Sass et de Compass devient (voir figure 1-2) :
Installation de Sass et Compass
$ sudo gem install sass
Password:
Fetching: sass-3.2.10.gem (100%)
Successfully installed sass-3.2.10
1 gem installed
Installing ri documentation for sass-3.1.0...
Installing RDoc documentation for sass-3.1.0...
$ sudo gem install compass
Fetching: compass-0.12.2.gem (100%)
Successfully installed compass-0.12.2
1 gem installed
Installing ri documentation for compass-0.12.2...
Installing RDoc documentation for compass-0.12.2...

RubyGems est capable de gérer les dépendances entre gems. L’installation de Compass, qui dépend du préprocesseur Sass, peut donc se résumer à une seule commande.
Installation de Compass et de ses dépendances, comme Sass
$ gem install compass

Il faut maintenant vérifier la bonne installation du préprocesseur et de son framework CSS3, en affichant leurs versions respectives (voir figure 1-3).

9