Résumé

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, place holders, 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.

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 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.

À qui s’adresse cet ouvrage ?

– 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
http://www.editions-eyrolles.com

Biographie auteur

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 !

...

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

Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.

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

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.

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, c’est bien qu’ils 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. J’ai appris à en surmonter quelques-unes à partir du moment où j’ai assimilé trois points essentiels 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 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, l’un d’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éprocesseurs et de jouer avec ; celui de Mehdi m’a ouvert les yeux sur l’évidence de les employer régulièrement dans mon travail d’intégrateur.

Sass et Compass sont aujourd’hui 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 l’ouvrage de Mehdi soit publié et m’en apprenne plus sur ces outils inévitablement appelés à devenir les compagnons fidèles de notre quotidien.

Raphaël Goetter

www.goetter.fr

fondateur d’Alsacréations

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 (http://www.hamptoncatlin.com/) 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 (http://nex-3.com/), 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,...

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

Installer Sass et Compass en ligne de commande

Choisir une alternative graphique

Transformer un fichier Sass en fichier CSS

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...

2

Une syntaxe de Sass

La force de Sass est d’introduire de nouveaux concepts pour rationnaliser l’écriture des feuilles de styles. Quels sont-ils ? Une chose est sûre, ils changeront votre manière de travailler.

SOMMAIRE

Découvrir les bases de la syntaxe

Simplifier la maintenance des feuilles de styles

Optimiser ses feuilles de styles

Éviter les pièges de Sass

Sass est l’un des préprocesseurs CSS les plus populaires. Il doit sa renommée à sa syntaxe qui enrichit celle de son grand-frère CSS. Découvrez dans ce chapitre ce que peut apporter cette nouvelle syntaxe à votre productivité, sans pour autant sacrifier vos acquis, car Sass s’efforce d’être compatible avec CSS.

Deux choix de syntaxe : Sass et SCSS

Historiquement, le projet Sass était intégré au projet Haml (http://haml.info), un moteur de gabarit HTML (ou template) écrit en Ruby. À l’instar de Python ou de Yaml, l’indentation y joue un rôle crucial : elle permet la fermeture automatique des balises. De fait, la forme indentée de Sass hérite de cette syntaxe tout en espaces, où les accolades et autres points-virgules n’ont pas leur place.

Si vous souhaitez utiliser cette syntaxe, donnez simplement à votre fichier l’extension .sass.

Attirante par sa concision et son gain apparent en temps de saisie, il existe une alternative à la syntaxe Sass : la syntaxe SCSS, ou Sassy CSS. Introduite en 2010 avec Sass 3.0, la syntaxe SCSS est une extension de CSS3 qui évite à l’intégrateur l’apprentissage d’un énième langage.

La syntaxe SCSS, plus naturelle pour l’intégrateur

.navigation {

background-color: #000;

color: #fff;

}

Sass, une syntaxe indentée

.navigation

background-color: #000

color: #fff

À moins de venir du monde Ruby/Haml ou Python, la syntaxe indentée est moins accessible au débutant et plus contraignante : une erreur d’indentation pourra transformer une règle en une autre. Pire, l’insertion par habitude d’un point-virgule fera échouer la compilation.

De CSS à SCSS

Qui parle d’extension de CSS3 parle d’héritage de la syntaxe classique des feuilles de styles. C’est pourquoi transformer un fichier CSS en un fichier SCSS est d’une facilité déconcertante : renommez l’extension .css en .scss et le tour est joué !

La syntaxe SCSS sera à l’honneur dans tout l’ouvrage, car elle est plus facile d’accès mais aussi parce qu’elle est désormais largement adoptée par la communauté. Elle est utilisée dans la majorité des exemples et autres ressources d’aide disponibles en ligne.

Bien évidemment, si SCSS se limitait à renommer une extension de fichier, le préprocesseur Sass n’aurait pas lieu d’être. Comme nous le verrons dans les prochaines sections, SCSS apporte son lot d’enrichissements de la syntaxe CSS.

Imbriquer les règles, une révolution

Qu’on se le tienne pour dit, aucun développeur n’aime saisir 20 fois les mêmes sélecteurs pour décrire un ensemble de règles CSS. Tous rêvaient secrètement de pouvoir les imbriquer : c’est désormais possible avec Sass.

Prenons l’exemple classique du menu de navigation constitué d’une liste non ordonnée à représenter sous la forme d’un menu horizontal.

ch02-001.html

<ul class="menu">

<li><a href="/">Accueil</a></li>

<li><a href="/references">Nos références</a></li>

<li><a href="/a-propos">L’agence</a></li>

</ul>

Nous pourrions écrire la feuille de styles associée suivante.

Des définitions CSS redondantes

.menu {

list-style: none;

overflow: hidden;

}

.menu li {

float: left;

}

.menu li + li {

margin-left: 1em;

}

.menu a {

text-decoration: none;

}

L’exemple est fort simple, mais il a tout de même fallu saisir le sélecteur .menu quatre fois et le sélecteur .menu li à deux reprises. Sur cet exemple simpliste, la situation n’est certes pas dramatique. Mais, transposée dans le cadre d’un réel projet, le temps perdu à répéter inlassablement les sélecteurs devient cauchemardesque.

Sass offre donc une syntaxe dite « imbriquée », qui permet de se soustraire à ces interminables et rébarbatives répétitions. Voyez par vous-même.

ch02-001.scss

.menu {

list-style: none;

overflow: hidden;

li {

float: left;

+ li {

margin-left: 1em;

}

}

a {

text-decoration: none;

}

}

L’imbrication des sélecteurs est redoutable d’efficacité. Finie la répétition des sélecteurs ! La lecture du code est elle aussi simplifiée.

RAPPEL Compiler un fichier Sass

Dans un terminal, déplacez-vous dans le répertoire contenant le fichier à compiler, puis lancez la commande sass, en précisant le nom du fichier à traiter et éventuellement le nom du fichier CSS de sortie.

$ sass ch02-001.scss ch02-001.css

Dans un premier temps, Sass lit le premier niveau .menu (le parent) et crée une règle si des styles le concernent, ce qui est le cas dans l’exemple présent. Ensuite, il ajoute ce parent en préfixe à chacun de ses enfants directs li et a.

SCSS, étape transitoire

.menu {

list-style: none;

overflow: hidden;

}

.menu li {

float: left;

+ li {

margin-left: 1em;

}

}

.menu a {

text-decoration: none;

}

Sass répète ces étapes jusqu’à avoir traversé l’intégralité des niveaux enfants. Ici, le sélecteur parent .menu li possède pour enfant le sélecteur + li. Sass génère donc un nouveau sélecteur .menu li + li, créant ainsi la feuille de styles attendue.

CSS compilée

.menu {

list-style: none;

overflow: hidden;

}

.menu li {

float: left;

}

.menu li + li {

margin-left: 1em;

}

.menu a {

text-decoration: none;

}

Sélecteur parent &

Les sélecteurs imbriqués sont une véritable révolution dans le travail quotidien du développeur front-end ou de l’intégrateur. Mais il est des cas où l’usage strict de l’imbrication des règles est insuffisant et où il est nécessaire de répéter les sélecteurs. C’est le cas des pseudo-classes.

Reprenons notre exemple de menu et, pour des raisons évidentes d’ergonomie, ajoutons un effet de survol sur les liens. Afin d’être compatible avec la navigation au clavier, forçons également le trait lors de leur prise de focus. Un premier réflexe est d’écrire nos pseudo-classes comme enfants du sélecteur a.

ch02-002.scss

.menu {

list-style: none;

overflow: hidden;

li {

float: left;

+ li {

margin-left: 1em;

}

}

a {

text-decoration: none;

:hover {

text-decoration: underline;

}

:focus {

text-decoration: underline;

}

}

}

La compilation de la feuille de styles ne retourne aucune erreur, mais le résultat n’est pas celui escompté. En effet, les pseudo-classes générées ne s’appliquent pas aux liens.

Extrait de ch02-002.css

.menu a {

text-decoration: none;

}

.menu a :hover {

text-decoration: underline;

}

.menu a :focus {

text-decoration: underline;

}

Comme nous l’avions vu lors du traitement des piles de sélecteurs, Sass lie le parent (.menu a) à ses enfants (:hover et :focus) en les séparant par une espace (.menu a :hover).

Les développeurs de Sass conscients du problème ont introduit un nouveau sélecteur, le sélecteur parent &. Son rôle est d’interférer avec la création des sélecteurs descendants pour référencer le sélecteur parent lui-même.

Lorsqu’il rencontrera un sélecteur parent &, Sass le remplacera par la combinaison des sélecteurs imbriqués jusqu’alors rencontrés.

ch02-003.scss

.menu {

a {

text-decoration: none;

&:hover {

text-decoration: underline;

}

&:focus {

text-decoration: underline;

}

}

}

Ainsi, dans l’exemple ch02-003.scss, lorsque Sass rencontre le sélecteur &:hover, il aura déjà parcouru les deux niveaux d’imbrication .menu et a, les combinant en un sélecteur .menu a. C’est notre sélecteur parent &. Le résultat final sera donc l’écriture du sélecteur .menu a:hover.

ch02-003.css

.menu a {

text-decoration: none;

}

.menu a:hover {

text-decoration: underline;

}

.menu a:focus {

text-decoration: underline;

}

Puisque le sélecteur & est remplacé par le parent calculé par Sass, il peut être utilisé pour préfixer une classe CSS, afin de créer un sélecteur plus spécifique.

SCSS

.alert {

border: 1px solid #fbeed5;

&.error {

border-color: #eed3d7;

}

}

CSS

.alert {

border: 1px solid #fbeed5;

}

.alert.error {

border-color: #eed3d7;

}

Le sélecteur parent est aussi d’une grande aide pour simplifier l’écriture d’un style alternatif en fonction d’une classe appliquée sur un élément parent. Prenez l’exemple de l’identification de la version d’Internet Explorer par l’ajout d’une classe .ie ou .ie7 sur la balise body ou html. L’écriture de la version spécifique à IE7 des styles de l’élément d’identifiant #navigation devient la suivante.

SCSS

#navigation {

top: 0;

.ie7 & {

top: 2px;

}

}

CSS

#navigation {

top: 0;

}

.ie7 #navigation {

top: 2px;

}

Une seule limite est imposée dans l’usage du sélecteur parent &. Ce dernier devra toujours être précédé par un caractère blanc (une espace ou un retour à la ligne).

Il est donc interdit d’écrire un sélecteur comme div&.

Étrange au premier abord, ce comportement est pleinement justifié : Sass n’a aucune connaissance du contexte de votre projet.

En effet, bien qu’il soit séduisant de vouloir appliquer en une seule passe un style global (.error) et un style plus précis (textarea.error), si Sass autorisait l’écriture du sélecteur qui suit :

.error {

/* … */

textarea& {

color: red;

}

}

L’inverse serait également permis :

textarea {

/*...

3

Développer avec Sass

Développez avec Sass ! L’enrichissement de CSS par le préprocesseur avec de nouveaux types de données vous ouvre de nouveaux horizons.

SOMMAIRE

Découvrir les types de données de Sass

Manipuler les données

Conserver une approche DRY

Ce chapitre présente les connaissances de base nécessaires à la programmation. Il sera effectivement question d’opérations sur des données, de manipulations à l’aide de structures de contrôle et de programmation fonctionnelle. L’écriture de vos feuilles de styles sera abordée sous un angle nouveau : dites adieu aux répétitions, bienvenue à la factorisation !

Cependant, n’oubliez jamais que tout développement aura pour finalité de générer des styles CSS, qui sont pour leur part bien statiques. N’attendez pas de Sass qu’il calcule et adapte automatiquement une grille en fonction du périphérique de vos visiteurs.

Sass et les données

Le langage CSS, bien que statique, ne cesse de manipuler des données. De la simple couleur aux listes de valeurs comme 1px solid #000 en passant par des chaînes de caractères telles que "Helvetica Neue", nous travaillons finalement avec de grandes quantités de données. Sass offre la même capacité de traitement de données, mais, le préprocesseur va plus loin en introduisant de nouveaux types de données qui procureront à l’intégrateur de nouveaux outils pour rendre la génération des feuilles de styles plus dynamique.

Les principaux types de données

Comme dans de nombreux langages de programmation, toute propriété CSS ou variable Sass est définie par un type qui dicte son comportement. Ainsi, comme nous le verrons plus loin dans le chapitre, additionner deux chiffres (3 + 3) ou deux chaînes de caractères ("3" + "3") ne produira pas le même résultat. Avant de nous lancer dans les opérations arithmétiques, découvrons les cinq types de données supportées par Sass.

Les chaînes de caractères

Par défaut dans Sass, toute valeur d’une propriété CSS ou toute valeur d’une variable est considérée comme étant des chaînes de caractères (ou string).

Ainsi, et contrairement à bien des langages de programmation, les guillemets sont facultatifs. Les deux formes $direction: left et $direction: "left" sont équivalentes. La principale différence entre la forme encapsulée dans des guillemets et la forme qui en est dépourvue tient dans la liste des caractères autorisés. La version pourvue de guillemets accepte tout caractère autre que le guillemet " qui fermerait prématurément la chaîne, tandis qu’une chaîne sans guillemets ne peut commencer ni par un chiffre, ni par des caractères spéciaux comme #, ., @, <, >, =, ~, * ou & et, surtout, ne peut pas contenir d’espaces.

SYNTAXE Apostrophes simples ou doubles ?

Les deux types de guillemets sont autorisés dans Sass. Placez vos chaînes de caractères dans l’un ou l’autre selon votre préférence. Néanmoins, vous opterez pour la version alternative si une chaîne contient un guillemet. Vous écrirez "l'arbre" ou 'Arial, "Helvetica Neue"'.

Si aucun type de données connu de Sass n’est identifié, alors le type appliqué à la valeur sera string et sera rendu tel quel dans la feuille de styles CSS. Ce mécanisme permet à Sass de générer des propriétés et des règles qui invalident la syntaxe CSS. Par exemple, l’écriture d’un filtre propriétaire d’Internet Explorer est invalide en CSS.

Une propriété CSS invalide

filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);

Dans le cas présent, Sass ne détecte aucun type de données particulier et va donc le traiter comme s’il s’agissait d’une chaîne de caractères. S’il ne réagissait pas de la sorte, vous devriez écrire le filtre propriétaire décoré par des guillemets qui, malheureusement, seraient générés dans la sortie CSS. Bien évidemment, le filtre ne serait pas appliqué par Internet Explorer car invalide syntaxiquement.

Des règles syntaxiques peuvent spécialiser une chaîne de caractères dans un type plus spécifique, comme une valeur numérique.

Les valeurs numériques

Dans Sass comme dans CSS, les valeurs numériques (ou number) se distinguent en deux groupes : les chiffres et les unités de mesure dont les plus courantes sont le pixel, le pourcentage ou encore l’unité de mesure relative em.

Toute valeur débutant par un chiffre sera considérée par Sass comme une valeur numérique.

Les couleurs

Une couleur (ou color) est un type de données spécifique de CSS qui désigne une couleur dans l’espace colorimétrique sRGB. Une couleur peut être représentée de plusieurs manières dans CSS.

• La plus courante est la représentation hexadécimale du modèle de couleur RGB (RVB en français) : #e6e6fa.

• Un nom réservé, décrit dans la spécification SVG 1.0 (voir encadré « Couleurs du Web ») : lavender (lavande).

• Une représentation RGB à l’aide de la fonction CSS rgb() : rgb(230, 230, 250).

• Une représentation HSL (Hue Saturation Lightness), ou TSL (Teinte Saturation Lumière) en français, avec la fonction CSS hsl() ...

4

Premier projet Sass et contraintes de production

Réduisez les temps de maintenance de votre projet grâce à une arborescence robuste et un code modulaire. Économisez du temps en exploitant la configuration centralisée par Compass.

SOMMAIRE

Initialiser des projets Sass et Compass

Créer une arborescence projet robuste

Découvrir le fichier de configuration de Compass

Est-il normal de perdre cinq minutes pour trouver comment surcharger un sélecteur ? Pourquoi devoir analyser des milliers de lignes avant de localiser le code responsable d’une régression ?

Un temps précieux est souvent perdu en maintenance à cause de l’architecture fragile du projet. Dans ce chapitre, vous apprendrez à créer un projet Sass dont l’arborescence et l’organisation sont pérennes.

Vous découvrirez également comment Compass se révèle être un allié de premier ordre pour accélérer la création d’un projet, mais aussi pour réduire drastiquement les saisies répétitives requises par Sass.

Initialiser l’arborescence du projet

Jusqu’à présent, nous avons réalisé des compilations Sass sur des fichiers individuels ou nous nous sommes contentés de sessions interactives pour illustrer les nouvelles notions apprises.

La réalité du terrain est tout autre avec des contraintes comme la génération de plusieurs feuilles de styles, la gestion d’images ou encore un découpage des sources Sass pour gagner en lisibilité.

Arborescence type

Nous verrons une méthode rapide de création d’une arborescence type d’un projet Sass. Vous pourrez évidemment l’adapter à votre convenance suivant vos contraintes projet.

La ligne de commande (ou shell) est fortement mise à contribution ici. Bien qu’il soit possible de réaliser les différentes étapes depuis le navigateur de fichiers, le shell accélère la procédure.

Je vous propose un exercice pratique qui vous aidera à appréhender le shell pour créer l’arborescence d’un projet nommé ch04-001.

Ouvrez un terminal puis, si cela n’est pas déjà fait, déplacez-vous dans votre répertoire utilisateur.

Créez ensuite un répertoire destiné à regrouper votre travail.

Rendez-vous dans ce dernier.

Création du répertoire de travail

$ cd ~

$ mkdir livre-sass

$ cd livre-sass/

Créez maintenant le dossier du projet et placez-vous dedans.

Création du dossier du projet

$ mkdir ch04-001

$ cd ch04-001/

L’arborescence de projet qui vous est proposée est visible à la figure 4-1.

Figure 4–1
Arborescence type d’un projet

L’arborescence regroupe dans un répertoire sass/ les fichiers sources qui seront lus par le préprocesseur. Un sous-répertoire sass/partials/ accueillera les fichiers partiels. Ainsi, tout fichier non préfixé par un tiret bas vous sautera aux yeux, vous évitant de générer une feuille de styles par erreur.

Dans le but d’éviter de rédiger toutes les règles CSS dans le fichier style.scss, nous découpons dans un sous-répertoire sass/partials/ui/ les différents éléments graphiques de la maquette (« ui » pour User Interface). Par éléments, j’entends des boutons, des blocs, des navigations, etc.

Dans un répertoire assets/ situé à la racine du projet, des sous-dossiers accueilleront les ressources statiques que sont les CSS compilées par Sass (assets/css/), les images (assets/img/), les web fonts (assets/fonts/) et les fichiers JavaScript (assets/js/).

Regrouper les ressources statiques dans un dossier assets/ permet de pointer aisément un domaine dédié à la distribution des ressources statiques aux navigateurs, en ciblant le dossier depuis la configuration du serveur web.

Il est en effet conseillé de délivrer aux navigateurs les fichiers statiques que sont les images, les feuilles de styles et autres JavaScript depuis un domaine dit cookieless ; autrement dit dépourvu de cookies. Cette mesure a pour but de réduire le nombre d’informations transmises entre le navigateur et le serveur, améliorant ainsi les performances du site.

ERGONOMIE Compass n’est pas loin !

Les listings qui vont suivre sont relativement verbeux. Rassurez-vous, la version simplifiée avec Compass est abordée dans quelques pages.

Création de l’arborescence du projet

$ mkdir -p sass/partials/ui assets/css assets/fonts assets/img assets/js

La commande mkdir accompagnée du paramètre -p permet de créer une arborescence complète, même en cas d’absence d’un niveau. Par exemple, exécuter la commande sans l’argument -p provoquera une erreur car le répertoire assets/ n’existe pas encore.

Le projet proposera :

• une feuille de styles style.css pour l’affichage sur écran ;

• une feuille print.css dédiée à l’impression ;

• un fichier partials/_base.scss en charge de stocker la configuration des sources Sass du projet ;

• un partial partials/_reset.scss qui regroupera l’ensemble des règles de mise à zéro des styles navigateur ;

• deux fichiers d’éléments d’interface, partials/ui/_button.scss et partials/ui/_nav.scss, créés à titre d’exemple.

Transposons ces informations en instructions à exécuter depuis la ligne de commande.

Création des fichiers SCSS du projet

$ cd sass/

$ touch style.scss print.scss

$ cd partials/

$ touch _base.scss _reset.scss

$ touch ui/_button.scss ui/_nav.scss

$ cd ../..

Si le shell ne vous est pas familier, voici une explication détaillée des différentes étapes.

On se déplace dans le dossier sass/ afin d’économiser sa saisie dans les prochaines commandes.

La commande touch crée un nouveau fichier vide, et donc ici les deux fichiers destinés à être compilés en feuilles de styles.

Comme nous allons créer les fichiers partiels, nous nous déplaçons dans le sous-répertoire partials/ pour éviter les répétitions de saisies.

Nous créons les différents fichiers partiels.

Puisque nous sommes descendus de deux niveaux dans l’arborescence du projet, nous remontons à sa racine.

L’arborescence type d’un projet est prête.

Si, comme moi, vous trouvez les manipulations nécessaires encore trop nombreuses et si la ligne de commande ne vous effraie pas, voyons comment accélérer drastiquement la création d’un projet Sass.

Initialisation rapide

Sachez que toutes les manipulations vues précédemment auraient pu être regroupées en quatre commandes.

Usage avancé de la ligne de commande

$ cd ~/livre-sass/

...

5

Compass, votre futur meilleur ami

Gagner toujours plus de temps en exploitant la collection de mixins et de fonctions d’aide de Compass.

SOMMAIRE

Manipuler les images

Exploiter la documentation

Contrôler le support cross-browser

Figure 5–1

Certains outils deviennent indispensables une fois qu’on les a utilisés. C’est le cas de Compass qui nous épargne la gestion des images et, surtout, simplifie significativement le support cross-browser de nos intégrations.

La lecture de ce chapitre changera votre rapport aux images. Imaginez que vous puissiez récupérer automatiquement les dimensions d’une image ou être alerté de son absence dans le projet !

Apprenez à exploiter des composants CSS3 qui font de Compass un framework CSS3 digne de ce nom.

Enfin, le chapitre présentera les mécanismes de Compass qui vous permettront de produire un code compatible avec tous les navigateurs cibles de votre projet sans effort de votre part.

Accès simplifié aux ressources statiques

L’accès aux ressources statiques a toujours été un point sensible des projets d’intégration. Et pour cause, il est souvent source d’erreur, en particulier dans l’écriture du chemin d’une image. L’erreur est humaine après tout.

Si cette tâche ingrate était à la charge de la machine, il est certain que ce type d’erreur disparaîtrait.

Ne perdez plus vos images

Dans la configuration du projet, Compass permet de renseigner une option images_dir. Grâce à elle, il est capable de calculer automatiquement le chemin d’accès aux images, même si vous décidez d’en changer plus tard !

Pour bénéficier de ce comportement, il faut simplement remplacer les appels à la fonction CSS url() par des appels à la fonction Compass image-url().

La syntaxe de la fonction image-url() est similaire à son homologue CSS, à la différence près qu’elle attend le chemin d’une image, depuis le répertoire déclaré par l’option images_dir.

Ainsi, en admettant que images_dir vaille 'img', l’accès à l’image img/logo.png s’écrit comme dans l’exemple qui suit (rappel : l’option s’écrit --images-dir en ligne de commande).

Initialisation de l’exemple

$ cd ~/livre-sass/

$ compass create ch05-001 --bare --css-dir css --images-dir img

directory ch05-001/

directory ch05-001/sass/

create ch05-001/config.rb

$ cd ch05-001/

ch05-001/style.scss

.logo {

background: transparent image-url('logo.png') no-repeat 0 0;

}

RAPPEL Guillemets optionnels

Sass n’oblige pas à entourer par des guillemets l’écriture d’une chaîne de caractères. Ainsi vous pouvez directement saisir image-url(logo.png). Pour ma part, je préfère les renseigner pour conserver la coloration syntaxique des données de type string dans mon éditeur de code.

Aucun fichier ou répertoire n’est généré, car la commande de création du projet est pourvue de l’option --bare. Vous devez donc créer le répertoire img/ à la racine du dossier ch05-001/. Puis vous y déposez une image nommée logo.png. Cela fait, vous pouvez compiler le projet.

Compilation de l’exemple

$ compass compile

directory css/

create css/style.css

Fichier css/style.css compilé

/* line 1, ../sass/style.scss */

.logo {

background: transparent url('/img/logo.png?1374695188') no-repeat 0 0;

}

Deux remarques peuvent être formulées sur le code généré.

La première, évidente, est la présence de l’argument ?1374695188 ajouté au chemin de l’image. Cet argument est un « casseur de cache » ou cache buster, c’est-à-dire que sa présence force le navigateur à recharger l’image si elle venait à changer. En effet, il est courant de mettre à jour une image sans en changer le nom. Pourtant, un navigateur ayant déjà chargé l’ancienne version en conserve une version en cache. Le nom de l’image restant intact, le navigateur affiche sa copie locale au lieu de récupérer la nouvelle image depuis le serveur. Ajouter un casseur de cache permet de changer le chemin d’accès à l’image si elle est modifiée, et donc de forcer son téléchargement.

EN ANNEXE Personnaliser le casseur de cache

La présence d’un casseur de cache sous la forme d’un argument peut être une gêne...

6

Création de sprites CSS avec Compass

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

SOMMAIRE

Comprendre les enjeux derrière les sprites CSS

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

Créer manuellement vos sprites CSS

Réduire les temps de traitement des sprites