Sass & Compass avancé, le livre
Optimiser ses feuilles de style CSS
par Mehdi Kabab, éditions Eyrolles
À propos
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.
Où acheter le livre ?
L'ouvrage est disponible dans toutes les bonnes librairies pourvues d'un rayon Informatique, ainsi que sur de nombreuses boutiques en ligne, dont :
Une version numérique est également disponible !
- en eBook (PDF + ePub), mais aussi en bundle papier + eBook sur IziBook Eyrolles
- pour votre Kindle
- en PDF + ePub sur Decitre.fr
Un mot sur l'auteur

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.
Sommaire du livre
Installation de Sass et Compass
- Installer Sass, Compass… et Ruby ?
- Environnements graphiques disponibles
- Première conversion d'un fichier Sass en feuille CSS
- En résumé
Une syntaxe de Sass
- Deux choix de syntaxe : Sass et SCSS
- Imbriquer les règles, une révolution
- Différents niveaux de commentaires
- Les 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
- Les pièges à éviter
- En résumé
Développer avec Sass
- Sass et les données
- Des mathématiques dans vos CSS
- Les directives de contrôle
- Manipulations avancées avec les fonctions
- En résumé
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
- En résumé
Compass, votre futur meilleur ami
- Accès simplifié aux ressources statiques
- Compass, une boîte à outils DRY
- Compass, un framework CSS3
- Un support cross-browser
- En résumé
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
- Des sprites aux petits oignons
- Exemple 1 : personnaliser les sélecteurs des sprites
- Exemple 2 : supprimer la répétition des dimensions
- Exemple 3 : ses sprites CSS en haute définition
- Exemple 4 : déclarer les dimensions des sprites par taille d'image
- En finir avec des compilations trop longues
- En résumé
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
- En résumé
Annexe A : configuration avancée avec Compass
- Maintenir un casseur de cache personnalisé
- Afficher des notifications Growl sous Mac OS X
- Partager des fichiers entre plusiers projets
Annexe B : 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
Téléchargements
Les codes sources principaux présentés dans les différents chapitres du livre sont disponibles en téléchargement sur GitHub.