Sass& Compass

avancéOptimiser ses feuilles de styles CSS

M e h d i K a b a b

Préface de Raphaël Goetter

© Groupe Eyrolles, 2013, ISBN : 978-2-212-13677-7

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 directivede constituer un langage aussi simple et intuitif que possible. Cet impératif de sim-plicité a également été cause de leurs principales lacunes : pas de variables, pas deboucles, 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 pro-duction ont progressé pour s’adapter à des contraintes nouvelles. Mon métier d’inté-grateur HTML, soumis lui aussi à cette implacable sélection darwinienne, fluctuepetit à 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 etrotations CSS 3D, et vous comprendrez ce que je veux dire.

Durant ces dernières années est apparu un panel impressionnant d’outils permettantde faciliter et d’accélérer notre travail quotidien d’intégrateur, notre fameuxworkflow : 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 quelquesorte. En tant que tel, ma première réaction envers les préprocesseurs fut celle de laméfiance. Je leur prêtais moult inconvénients : ce n’est pas du vrai CSS ; pire, ça déna-ture CSS (oui, moi je fais du vrai CSS), ça produit une « soupe » de code, ça rajoute unniveau de complexité, etc.

Préfacede Raphaël Goetter

Sass et CompassVI

Ajoutez à cela que je ne supporte guère la lecture des règles imbriquées dans les prépro-cesseurs (je trouve ça bien plus fastidieux à lire), que je suis allergique à la ligne de com-mande et… que je suis parfois de mauvaise foi !

Pour autant, il faut parfois savoir prendre du recul et se rendre à l’évidence : si cesoutils existent et se démocratisent, c’est bien qu’ils répondent à un besoin. Et cebesoin est simple : contourner certaines contraintes modernes de délais et de rende-ment sans perdre en qualité de production.

De nombreuses idées reçues (et fausses) circulent autour des préprocesseurs CSS. J’aiappris à en surmonter quelques-unes à partir du moment où j’ai assimilé trois pointsessentiels les concernant :1 Un préprocesseur n’est 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 s’adapter au changement et pratique sa veille quo-tidienne. Les préprocesseurs CSS, bien employés, peuvent devenir redoutablementefficaces une fois intégrés dans notre flux de production moderne. Et si, en plus, l’und’eux parvient à me construire des sprites CSS automatiquement sans que j’aie àm’arracher un seul cheveu, comme le fait déjà Compass, c’est à moitié gagné pour moi !

Le livre de Kaelig (Deloumeau-Prigent) m’a donné envie de tester des préprocesseurset de jouer avec ; celui de Mehdi m’a ouvert les yeux sur l’évidence de les employerrégulièrement dans mon travail d’intégrateur.

Sass et Compass sont aujourd’hui des produits mûrs portés par une communauté trèsriche, 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 fonctionna-lités désormais automatisées qui ne perturberont plus votre routine journalière de travail.

Je suis heureux que l’ouvrage de Mehdi soit publié et m’en apprenne plus sur cesoutils inévitablement appelés à devenir les compagnons fidèles de notre quotidien.

Raphaël Goetterwww.goetter.fr

fondateur d’Alsacréations

Table des matières

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

CHAPITRE 1Installation de Sass et Compass................................................... 5

Installer Sass, Compass… et Ruby ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Installation sous Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Ouvrir le terminal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Mettre à jour les paquets Ruby (RubyGems) . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8En cas de problème sous Mac OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Installation sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Ouvrir l’invite de commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Installer Ruby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Installation sous Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Environnements graphiques disponibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

L’environnement Compass.app pour Linux, Windows et OS X . . . . . . . . . . . . 15Le compilateur Scout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Prepros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16CodeKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Mixture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Première conversion d’un fichier Sass en feuille CSS . . . . . . . . . . . . . . . . . . . . . . 17Session interactive de Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Sass et CompassVIII

CHAPITRE 2Une syntaxe de Sass .................................................................... 21

Deux choix de syntaxe : Sass et SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22De CSS à SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Imbriquer les règles, une révolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Sélecteur parent & . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Imbriquer les groupes de sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Sélecteurs avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Les propriétés imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Différents niveaux de commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Les commentaires silencieux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Conserver les commentaires de licence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Déclarer et utiliser une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Portée d’une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Portée locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Écraser une variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Variable globale ou locale ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Interpoler une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Diviser et être plus efficace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Les feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Mise en pratique des feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . . 46Importations imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Limites de l’instruction @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Définir des variables par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Réutiliser son code : introduction aux mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Définir un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Appeler un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Règles CSS dans les mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Passage d’arguments à un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Arguments par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Liste d’arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Passage d’un bloc de contenu à un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Héritage avec @extend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Utiliser l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Du bon usage de l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Implications pour les règles imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Création de sélecteurs nuisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Maîtriser l’héritage avec les placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Table des matières IX

Usage avancé des placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Support des Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Imbriquer les Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Des variables pour être lisible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Media Queries avancées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Les pièges à éviter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84Syndrome de l’imbrication aiguë . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

La règle de l’inception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Héritages complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Consolider à tort un héritage par placeholder . . . . . . . . . . . . . . . . . . . . . . . . . 89Ordre d’apparition des placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

CHAPITRE 3Développer avec Sass.................................................................. 93

Sass et les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Les principaux types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Les valeurs numériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Les couleurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Les booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Connaître le type d’une donnée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97Le cas particulier de la valeur nulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Des mathématiques dans vos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Comparaison de valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Opérations numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Opérations avec des unités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Opérations sur les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Opérations sur les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Opérations booléennes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Les directives de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Les tests conditionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Les boucles @for et @while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Les itérations de listes avec @each . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Manipulations avancées avec les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113Fonctions sur les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Fonctions numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115Fonctions sur les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Fonctions RGB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Sass et CompassX

Fonctions HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Fonctions d’opacité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117Autres fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Fonctions sur les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Fonctions d’introspection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Fonctions utilitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Fonctions personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

CHAPITRE 4Premier projet Sass et contraintes de production.................. 123

Initialiser l’arborescence du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Arborescence type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Initialisation rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Le cas des mixins tierce partie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Renforcer la structure du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Penser « modulaire » : l’exemple de SMACSS . . . . . . . . . . . . . . . . . . . . . . . . 134

Principe de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134SMACSS appliqué à Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Compiler un projet Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Compilation manuelle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Compilation automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

Utiliser des bibliothèques Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Initialisation de projet facile avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Créer un nouveau projet Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146Transformer un projet existant en projet Compass . . . . . . . . . . . . . . . . . . . . 148S’appuyer sur un fichier de configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Compass centralise la configuration du projet . . . . . . . . . . . . . . . . . . . . . . . . . . 149Anatomie d’un fichier de configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Options disponibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Fichier de configuration type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Compiler un projet Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Compilation manuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Compilation automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Utiliser des bibliothèques Sass dans un projet Compass . . . . . . . . . . . . . . . . . . . 158En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Table des matières XI

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

Accès simplifié aux ressources statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160Ne perdez plus vos images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Récupérer les dimensions d'une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Embarquer des images dans la feuille de styles . . . . . . . . . . . . . . . . . . . . . . . 164

Compass, une boîte à outils DRY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Une documentation riche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Déterminer quels fichiers importer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Compass, un framework CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170La guerre des préfixes, un lointain souvenir . . . . . . . . . . . . . . . . . . . . . . . . . . 170Les grands classiques de CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Coins arrondis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Ombres portée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172@font-face facile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Un module d'image très complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176Un support cross-browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Un outil à l'écoute du marché . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Un support cross-browser paramétrable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Compass, ou comment oublier Internet Explorer . . . . . . . . . . . . . . . . . . . . . 182

Génération automatique de hacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182Désactiver le support d’Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

CHAPITRE 6Création de sprites CSS avec Compass .................................... 185

Qu'est-ce qu'un sprite CSS ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186Les sprites, une nécessité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Accélérer le chargement de la page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Créer une sprite map n'est pas une sinécure . . . . . . . . . . . . . . . . . . . . . . . . . . 189Compass, ce super-héros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

La magie de Compass pour la génération de sprites . . . . . . . . . . . . . . . . . . . . . . 189Créer une sprite map CSS avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Générer les sprites CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Paramétrer une sprite map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Augmenter l'espace autour des sprites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193Préciser les dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Configurer la position. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195Des positions exprimées en pourcentages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Répéter un sprite horizontalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Sass et CompassXII

Configurer le nom de la classe de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200Choisir l'agencement optimal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200Ordonner les images dans la sprite map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202Intégrer la sprite map via Data-URI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Gestion automatique des pseudo-classes CSS . . . . . . . . . . . . . . . . . . . . . . . . 203Maîtriser les sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Des sprites aux petits oignons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Exemple 1 : personnaliser les sélecteurs des sprites . . . . . . . . . . . . . . . . . . . . 213Exemple 2 : supprimer la répétition des dimensions . . . . . . . . . . . . . . . . . . . 214Exemple 3 : des sprites CSS en haute définition . . . . . . . . . . . . . . . . . . . . . . 217Exemple 4 : déclarer les dimensions des sprites par taille d’image . . . . . . . . . . 221

En finir avec des compilations trop longues . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Origine du problème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

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

CHAPITRE 7Gérer un projet Compass : un peu de méthodologie .......................................................... 229

De la bonne gestion des versions de Sass et Compass . . . . . . . . . . . . . . . . . . . . 230Problèmes rencontrés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230Le gestionnaire de paquets Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Déclarer les gems d’un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Installation de Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233Installer les gems propres au projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Cycle de vie des gems d’un projet avec Bundler . . . . . . . . . . . . . . . . . . . . . . . 236Partager son projet géré par Bundler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Déboguer un projet Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239Exploiter les informations de débogage de Sass . . . . . . . . . . . . . . . . . . . . . . . 239Focus sur une solution en devenir : Source Maps . . . . . . . . . . . . . . . . . . . . . . 242

Activer le support de Source Maps dans Sass . . . . . . . . . . . . . . . . . . . . . . . . . . 243Activer le support de Source Maps dans Compass . . . . . . . . . . . . . . . . . . . . . . 244Activer le support de Source Maps dans le navigateur . . . . . . . . . . . . . . . . . . . 245Exploiter les Source Maps du préprocesseur dans le navigateur . . . . . . . . . . . . 247

Travailler en équipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Stratégies de gestion des styles CSS générés . . . . . . . . . . . . . . . . . . . . . . . . . 252Stratégie 1 : versionner les styles CSS compressés . . . . . . . . . . . . . . . . . . . . . 252

Ciel, un conflit ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Stratégie 2 : utiliser un script de déploiement . . . . . . . . . . . . . . . . . . . . . . . . 254Documentez ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Table des matières XIII

ANNEXE AConfiguration avancée avec Compass..................................... 259

Maintenir un casseur de cache personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260Afficher des notifications Growl sous Mac OS X . . . . . . . . . . . . . . . . . . . . . . . 262Partager des fichiers entre plusieurs projets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Mise en œuvre avec Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Mise en œuvre avec Compass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

ANNEXE BGuide de survie de l’interface en ligne de commande .......... 269

L’invite de commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Lister les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Faciliter la lecture de la liste de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Afficher les fichiers cachés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Se déplacer dans le système de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Revenir dans son répertoire personnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Remonter dans l’arborescence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274Alterner entre deux emplacements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Manipuler les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Créer un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Créer un répertoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Copier des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276Déplacer des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Supprimer des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

Motifs de remplacements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

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

Sass est un préprocesseur CSS dont le but est d’épargner bien du labeur à ceux quidoivent produire des feuilles de styles.

Tel était en tout cas l’objectif de Hampton Catlin (http://www.hamptoncatlin.com/) lorsqu’ill’a développé en 2006. Hampton Catlin est connu notamment pour avoir créé lessites et les applications mobiles de la fondation Wikimedia. Aidé de NathanWeizenbaum (http://nex-3.com/), ils ont doté Sass de mécanismes similaires à ceuxtrouvés dans des langages de développement tels que Ruby, PHP ou Python. Un pariréussi en demi-teinte à l’époque. En effet, la syntaxe fortement inspirée de celle dulangage 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 entre-temps leader du projet, ils font évoluer la syntaxe du préprocesseur pour qu’elle soitcompatible avec CSS. La version 2.2.0 paraît mi-2009. Cette fois, l’objectif estatteint : en rapprochant la syntaxe de Sass de celle de CSS, la prise en main de l’outildevient plus facile et permet de réduire les temps de développement, y compris pourle 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 frameworkpour 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 desprites CSS.

Sass est devenu si populaire que d’importantes équipes de développement, telle cellede 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 lacréation de feuilles de styles. À tel point que le réseau social professionnel LinkedIn aembauché Chris Eppstein pour lui donner, entre autres missions, celle de maintenirSass et Compass.

Avant-propos

Sass et Compass2

Il est toujours difficile de choisir une solution technique. Sans verser dans le prosély-tisme 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 demode. 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. Maisforce est de constater que l’outil et son framework CSS3 Compass sont souvent malutilisé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’à rendreimpossible 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 front-end, j’ai eu l’occasion de les utiliser dans de nombreux projets. Le travail dans uneagence web comme Clever Age m’a permis d’exploiter ces deux outils dans des cir-constances diverses et variées, allant du simple site statique à la création de plusieursthè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 vouspropose 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 lespièges de certaines fonctionnalités à double tranchant, que sont l’imbrication oul’héritage des règles CSS.

Clever Age

Clever Age est un cabinet d’expertises qui se positionne sur l'ensemble de la chaînede production web depuis plus de 10 ans. Cette couverture 100% digitale, ainsi queses références, en font un prestataire majeur du marché francophone. La société pri-vilégie un usage pragmatique des technologies du Web, appliquant les bonnes prati-ques techniques et méthodologiques sur les standards, l'ergonomie et l'accessibilité,la performance, la capitalisation.B http://www.clever-age.com/

Avant-propos 3

À qui s’adresse cet ouvrage ?Le soin apporté à ce livre le rendra accessible aux débutants, auxquels on explique lespremiè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 tra-

vaillent avec les mêmes outils.

Structure de l’ouvrageLe livre est découpé en sept chapitres.• Tout d’abord, le chapitre 1 présente la démarche d’installation de Sass et de Com-

pass en fonction des différents systèmes d’exploitation que sont Mac OS X, Linuxou encore Windows. Des alternatives graphiques sont également proposées. L’ins-tallation 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 : nota-tion imbriquée des règles, placeholders, etc.

• Le chapitre 3 traite du développement avec Sass. En effet, le préprocesseurapporte son lot d’instructions qui l’élèvent au statut de langage de programma-tion. Apprenez à manipuler efficacement les différents types de données de Sasspour 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 com-ment penser une arborescence robuste pour minimiser ses temps de maintenance.On y introduira Compass, le framework CSS3 pour Sass, et son fichier de confi-guration 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, Compassapporte son lot non négligeable de commodités.

• Le chapitre 6 s’étend sur un outil particulièrement utile alors que les performan-ces des sites sont de plus en plus critiques : le générateur de sprites CSS de Com-pass – la manipulation des sprites map n’aura plus de secret pour vous et maintenirdes sprites haute définition n’aura jamais été aussi simple.

• Enfin, le chapitre 7 donne des pistes pour organiser et maintenir un projet Sassou Compass… en équipe ! Il y sera aussi question de débogage, notamment avecl’introduction du support de Source Maps dans Sass.

Sass et Compass4

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 efficacementSass et Compass.

RemerciementsMes remerciements vont tout d’abord aux développeurs de Sass et de Compass qui ontlittéralement révolutionné mes méthodes de travail. Merci à Hampton Catlin, NathanWeizenbaum et Chris Eppstein et à tous les contributeurs pour votre formidable travail !

Je remercie Kaelig Deloumeau-Prigent pour m’avoir intégré à l’équipe de relecteursde 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édactiond’un ouvrage dédié à Sass et Compass.

Muriel, des éditions Eyrolles, pour avoir cru en moi et pour sa bonne humeur ettoute 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 Schillingerqui ont habilement usé de la Force pour corriger mon élocution à la Yoda mais, sur-tout, 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 moti-vation (vous avez dit glaces ?).

Enfin, merci à Marie, mon rayon de soleil permanent qui a illuminé mes séances detravail et qui a assumé mes longs mois d’indisponibilité.

Mehdi Kababhttp://pioupioum.fr/

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 http://livre-sass-compass.frB https://github.com/piouPiouM/livre-sass-compass-avance/

6Création de sprites CSS

avec Compass

Créer des sprites a toujours été la bête noire des intégrateurs car la tâche estfastidieuse. Mais c’était avant Compass qui facilite grandement la vie !

SOMMAIRE

B Comprendre les enjeux derrière les sprites CSS

B Exploiter efficacement le générateur de sprites CSS de Compass

B Créer manuellement vos sprites CSS

B Réduire les temps de traitement des sprites

Sass et Compass186

Ce chapitre est dédié à un sujet devenu incontournable dans l’optique d’améliorer lesperformances d’un site. Néanmoins, ses difficultés de mise en œuvre et de mainte-nance découragent plus d’un intégrateur. Vous l’aurez reconnu, ce chapitre traitera dela gestion des sprites CSS avec Compass.

Qu'est-ce qu'un sprite CSS ?Derrière ce terme anglais se cache une technique fondamentale du jeu vidéo en deuxdimensions. Rappelez-vous ce héros se déplaçant sur un décor. Au lieu de chargerune image différente à chacun de ses mouvements, le chargement d’une seule imageformée de toutes ses postures se révèle bien plus performant (voir figure 6-1). Il suffitde restreindre l’affichage de la posture du héros à la zone concernée (voir figure 6-2).

Il en est de même avec les sprites CSS, tout simplement : on affecte une image defond à un élément dont on restreint son viewport, c’est-à-dire sa surface d’affichage.

Figure 6–1Les différentes postures du personnage sont réunies en une image.

Figure 6–2Seule la portion utile de l’image est affichée.

RESSOURCES Sprites CSS : meurs, découpe d’images, meurs !

La technique des sprites CSS n’est pas si récente. Je vous invite à lire la traduction française d’un articlerédigé par Dave Shea en 2004 :B http://www.pompage.net/traduction/sprites

Création de sprites CSS avec CompassCHAPITRE 6

187

Un cas d’usage des sprites CSS

Compass facilite grandement notre travail puisqu’il se charge de réunir les imagesdans un seul PNG et, surtout, de produire les styles CSS qui y sont associés. Grâce àCompass, ce qui vous prenait auparavant une heure de travail ne vous occupera plusque quelques secondes, le temps d’écrire trois lignes de code. Pour les situations lesplus complexes, comme la création de sprites haute définition, Compass vous serad’une grande aide en vous fournissant bon nombre d’outils pour produire des spritesCSS sur mesure.

Les sprites, une nécessitéÉtendez l’exemple de notre jeune héros de jeux vidéo aux éléments d’interface devotre site. Grâce à cette technique, l’interface devient plus réactive car le navigateurn’aura pas à faire patienter l’utilisateur le temps de télécharger une autre image suite àl’action de survol ou de clic sur un élément. Mais est-ce le seul argument à mettre aucrédit des sprites CSS ?

.heroes { /* Une image d’arrière plan est appliquée à l'élément */ background: url('img/sprite-heroes.png') 0 0; /* Puis on restreint sa surface d’affichage */ display: block; height: 48px; width: 48px}/* Chaque mouvement du personnage correspond à une position différente dans l'image de la sprite map. */.heroes.waiting { background-position: -48px -24px;}.heroes.walk { background-position: -48px -48px;}

GLOSSAIRE Sprite map, sprite

L’image qui regroupe les différentes images requises par la technique de sprite CSS est appelée unesprite map ou encore une sprite sheet. Littéralement, un « plan du sprite » (et nous éviterons de traduirele mot sprite par « lutin » pour ne pas interloquer nos voisins de bar).Un sprite désigne quant à lui une image intégrée dans la sprite map.

Sass et Compass188

Accélérer le chargement de la page webRegrouper plusieurs images en une seule accélère le chargement de votre site. Pourcommencer, il faut savoir que le poids de la sprite map est généralement inférieur àcelui du cumul de toutes les images qui la compose.

La vraie force des sprites réside dans la réduction du nombre d’échanges effectuésentre le navigateur et le serveur. Cela permet d’obtenir un temps de chargement pluscourt pour le client, mais aussi un allègement de la charge de travail du serveur.

En effet, à chaque demande de ressource statique le navigateur doit attendre laréponse du serveur puis télécharger les données. Même sur des sites aux infrastruc-tures performantes, cette latence incompressible est de l’ordre de 50 millisecondesauxquelles il faut ajouter le temps de chargement des données. Multipliez cela par unnombre conséquent d’images et vous comprendrez pourquoi (voir figure 6-3) desgéants comme Amazon ou Google ont vite fait d’intégrer les sprites CSS dans leurflux de travail (voir figure 6-4).

Figure 6–3 Diagramme de chargement des images sur une page. Avant et après regroupement des images dans une sprite map : un gain de temps de chargement non négligeable !

Création de sprites CSS avec CompassCHAPITRE 6

189

Créer une sprite map n'est pas une sinécureIl devient vite intéressant de réunir toutes les images de décoration d’un site en unesprite map. Mais attention, plus il y aura d’images, plus sa maintenance sera difficile.

Une image change de dimensions ? Vous êtes bon pour réordonner une partie de lasprite map, puis pour répercuter les nouvelles coordonnées dans la feuille de stylesCSS. La sentence est la même si vous supprimez une image de la sprite map.

Un véritable cauchemar pour le web designer ou l’intégrateur.

Cette contrainte est la cause principale de la faible adoption des sprites CSS. Pendantde nombreuses années, seuls les sites ayant un trafic très important appliquaient cettetechnique à toutes leurs images décoratives pour alléger la charge de leurs serveurs.

La situation a cependant évolué grâce à l’émergence d’outils en ligne ou à installer surson poste de travail pour vous aider à générer une sprite map et les règles CSS associées.

Néanmoins, la vie ne serait-elle pas plus simple si tout le processus de gestion dessprites CSS pouvaient se faire de lui-même et au même endroit ?

Compass, ce super-hérosPuisque Compass est intégré à votre flux de conception des feuilles de styles, pour-quoi ne pas lui demander de gérer les sprites CSS ? Il connaît déjà l’emplacement desimages du projet grâce au fichier de configuration (voir chapitre 5) et il est en chargede produire les feuilles de styles. Bref, il serait le compagnon idéal pour s’atteler àcette tâche ingrate.

Voyons comment il vole au secours de l’intégrateur.

La magie de Compass pour la génération de spritesCompass embarque justement un générateur de sprites CSS qui, dans sa forme laplus simple, se contente de trois lignes de code pour créer une sprite map et les règlesCSS associées, et ce, que vous ayez 5 ou 100 images à gérer. De quoi booster votreproductivité !

Figure 6–4Une sprite map de la plate-forme sociale Google+

Index

# (caractère) voir Interface en ligne de commande#{…} (motif) voir Interpolation$ (caractère) voir Interface en ligne de commande& (caractère) voir Sélecteur parent

AArborescence

organiser 124renforcer 129

BBibliothèque 144, 158

charger 145, 158installer 145

Bonnes pratiquespréfixer 122variable par défaut 55

Boucles 110, 112à rebours 111

Bundler 231, 232, 243, 252déclarer des gems 233désinstaller 233installer 233maintenir 236nettoyer 237publier 237utiliser 233, 235

CCache 143, 157

buster voir Casseur de cacheCanal

alpha 107, 117, 118couleur (de) 107

Cas d’usage@content 82

@extend 88commentaire

important 34silencieux 33

fonction zip 118Internet Explorer 27, 64, 110placeholder 76, 89, 91portée de variable 41sélecteur parent 27sprites CSS

génération automatique 213haute définition 217par dimensions 221

valeur null 99variable par défaut 54

Cascade CSS 72, 84, 87, 88, 239Casseur de cache 162

désactiver 162personnaliser 260

Chrome 1, 74, 177, 241, 243, 245, 247Clever Age 2, 4, 182Code tierce partie 128CodeKit 16Commentaire

CSS 33important 34silencieux 33supprimer 33

Compasshistoire 1installation 6versions 6, 200, 202, 203, 212

Compass.app 15Compiler

automatiquement 143, 157manuellement 142, 156

Sass et Compass282

un fichier Sass 17, 24un projet Compass 156un projet Sass 142

Concaténation 106Conflit

merge 253résoudre 253, 254

Cookieless 125, 153, 154Cross-browser 159, 160, 176, 179, 180, 220CSS

cascade 87hack 182sélecteurs 31, 78

CSS3@font-face 174background (multiple) 62, 177border-radius 171box-shadow 172linear-gradient 178, 181radial-gradient 177sélecteurs 31text-shadow 174

DData-URI 164

sprite CSS 202Déboguer 239

Source Maps voir Source MapsDéfinition

héritage 66mixin 55Source Maps 242sprite CSS 186sprite map 187sprite sheet 187variable 36

Division (opérateur de) 103, 106Documentation 166DRY 66, 69, 88, 97, 120, 165, 169

EÉquipe 252Extension

.css 51

.sass 22

.scss 22optionnelle 45

FFeuille de styles partielle 45, 49, 53, 125

réutiliser 130Fichier de configuration 149, 150

options (liste) 151Firebug 239Firefox 74, 177, 180, 183, 241, 243, 245Fonction

arguments (optionnels) 114chaînes (sur les) 114couleurs (sur les) 115créer 121font-files 176headers 176hsl 96hsla 96image-url 161introspection 120listes (sur les) 118numériques 115rgb 95, 107rgba 96, 107type-of 97url 45, 51, 161utilitaires 121

front-end 2, 25, 34, 44, 100

GGemfile 231, 232, 233, 243, 273Gemfile.lock 234, 236, 238Git 238

conflit (résoudre) 253, 254Github 128, 145, 170Google Font API 51Growl 262GUI voir Interface graphiqueGuillemets (choix de) 95

HHaml 22Haute définition 217Héritage 66, 83, 88

Index 283

maîtriser 74placeholder 75sémantique 70, 74utiliser 69

HSL 96, 115

IImage 161

Data-URI 164dimensions 163

Imbriquer@import 49groupes de sélecteurs 29Media Queries 79propriétés 32règles voir Règles imbriquées

Importer 45, 49, 169Inception 88Installation

de Compass 6de Ruby 6, 13de Sass 6de XCode 10sous Linux 14sous Mac OS X 6sous Windows 12

Interface en ligne de commande 8, 124, 127, 270cd 273cp 276ls 270mkdir 275mv 277pwd 270répertoire personnel 273rm 278sous Mac OS X (ouvrir) 7sous Windows (ouvrir) 12touch 275

Interface graphiqueCodeKit 16Compass.app 15Mixture 16Prepros 16Scout 16

Internet Explorer 27, 64, 117, 181, 182désactiver (support) 184filtre 95, 178

Interpolation 42, 104, 111Introspection 120

KKISS 120

LLayout 75, 76, 77, 129, 132, 134, 210Loud comment voir Commentaire important

MMaintenance 21, 43, 51, 52, 56, 78, 123, 128, 129,

134, 135, 139, 182, 186, 189Media Queries 65, 79, 82, 217, 220

imbriquer 79limitations 83variables 81

Mixin 57, 58arguments 59

liste 62par défaut 61

bloc de contenu 64déclarer 55limitations 63, 65utiliser 56, 67

Mixture 16

Ooily_png 226Optimiser

arborescence 43code 86code (réutiliser) 55compilation 226imbrications 86poids 69, 135, 227sélecteurs 139, 207

PPartial voir Feuille de styles partiellePerformance 34, 44, 74, 100, 125, 134, 164, 186Placeholder 74, 89, 131, 135, 137

déclarer 74

Sass et Compass284

étendre 75ordre 91

Plug-in voir BibliothèquePréfixes constructeurs 170Prepros 16Projet Compass

configuration voir Fichier de configurationconvetir en 148créer 146

Prompt voir Interface en ligne de commandeProxy 260Pseudo-classes 25, 31

RRacine de projet 143README (fichier) 133, 255Règles imbriquées 23, 25, 29, 31, 32, 39, 49, 57,

71, 75, 220inception 88surimbrication 85

Requête de média voir Media QueriesRetina voir Haute définitionRGB 95, 107, 115Ruby

installation 6, 13RubyGems 144, 158, 231

FilePermissionError 8mettre à jour 7

SSass

histoire 1, 22versions 6, 114, 243

SassScript 19Sassy CSS 22Scout 16Sélecteur

imbriqué voir Règles imbriquéesparent 26, 31, 49, 58

cas d’usage 27limitations 28syntaxe 26, 27, 28

pseudo-classes voir Pseudo-classesSession interactive

de Compass 20de Sass 19quitter 19

SMACSS 134, 139Source Maps 242

activerCompass 244navigateur 245Sass 243

définition 242lier un fichier 251lier un projet 248utiliser 247workspace 248

Sprite CSS 221classe de base 191

configurer 200supprimer 200

configurer 193créer 190Data-URI 202définition 186dimensions 194espacement 193fonctions 209, 210génération

automatique 190manuelle 209

haute définition 217layout 200mixins 209, 210optimiser 207optimiser (compilation) 226ordonner 202position 195pseudo-classes 203répétition 197

Subversion 238conflit (résoudre) 253

Surimbrication 85Surveillance (de projet) 144, 157

arrêter 144, 157SVG 95, 181Syntaxe

Index 285

!default 53@content 64@each 112@extend 66@for 110@function 121@if, @else, @else if 109@import 45, 49, 51@include 56, 59@mixin 55, 59, 61, 62@return 121@while 112argument multiple (caractère ...) 62commentaire

CSS 33important 34silencieux 33

indentée (historique) 22Media Queries 79placeholder 74SCSS 22sélecteur parent 26, 27, 28variable 36, 38

TTerminal voir Interface en ligne de commandeTest contitionnel 109TSL 96Types de données 94

algèbre 103booléen 96, 108chaîne 94, 106comparer 101

couleur 95, 107division 103, 106liste 96, 102, 112null (valeur) 98numérique 95, 104tester 97tests conditionnels 109

UUnicode 37Unités

calcul 104correspondances 105

VVariable

contenu 38déclarer 36définition 36écraser 40interpoler 42Media Queries (expression) 81par défaut 52, 53portée

choix de 42globale 40, 50, 65locale 39, 50, 65

redéclarer 42surcharger 139syntaxe 36unicode 37

XXCode 10