À propos

Couverture du livre Sass et Compass avancé

Grâce à Sass et à son framework CSS3 Compass, les intégrateurs et développeurs web professionnels confrontés à des impératifs de productivité et de maintenabilité disposent enfin d’outils libres pour écrire de façon cohérente leurs feuilles de styles CSS.

Sass, un must pour optimiser l’écriture des feuilles de styles CSS

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

Une référence méthodologique pour l’intégrateur web

Écrit par l’un des pionniers de l’utilisation de Sass/Compass et préfacé par Raphaël Goetter, fondateur d’Alsacreations.fr, cet ouvrage est un must pour l’intégrateur web qui souhaite acquérir les meilleures pratiques d’écriture CSS et les compétences en programmation nécessaires à la maîtrise de Sass.

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 !

Un mot sur l'auteur

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

Sommaire du livre

Installation de Sass et Compass

  1. Installer Sass, Compass… et Ruby ?
  2. Environnements graphiques disponibles
  3. Première conversion d'un fichier Sass en feuille CSS
  4. En résumé

Une syntaxe de Sass

  1. Deux choix de syntaxe : Sass et SCSS
  2. Imbriquer les règles, une révolution
  3. Différents niveaux de commentaires
  4. Les variables
  5. Diviser et être plus efficace
  6. Réutiliser son code : introduction aux mixins
  7. Passage d'un bloc de contenu à un mixin
  8. Héritage avec @extend
  9. Maîtriser l'héritage avec les placeholders
  10. Support des Media Queries
  11. Les pièges à éviter
  12. En résumé

Développer avec Sass

  1. Sass et les données
  2. Des mathématiques dans vos CSS
  3. Les directives de contrôle
  4. Manipulations avancées avec les fonctions
  5. En résumé

Premier projet Sass et contraintes de production

  1. Initialiser l'arborescence du projet
  2. Compiler un projet Sass
  3. Utiliser des bibliothèques Sass
  4. Initialisation de projet facile avec Compass
  5. Compass centralise la configuration du projet
  6. Compiler un projet Compass
  7. Utiliser des bibliothèques Sass dans un projet Compass
  8. En résumé

Compass, votre futur meilleur ami

  1. Accès simplifié aux ressources statiques
  2. Compass, une boîte à outils DRY
  3. Compass, un framework CSS3
  4. Un support cross-browser
  5. En résumé

Création de sprites CSS avec Compass

  1. Qu'est-ce qu'un sprite CSS ?
  2. Les sprites, une nécessité
  3. La magie de Compass pour la génération de sprites
  4. Maîtriser les sélecteurs
  5. 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
  6. En finir avec des compilations trop longues
  7. En résumé

Gérer un projet Compass : un peu de méthodologie

  1. De la bonne gestion des versions de Sass et Compass
  2. Déboguer un projet Sass
  3. Travailler en équipe
  4. En résumé

Annexe A : configuration avancée avec Compass

  1. Maintenir un casseur de cache personnalisé
  2. Afficher des notifications Growl sous Mac OS X
  3. Partager des fichiers entre plusiers projets

Annexe B : guide de survie de l'interface en ligne de commande

  1. L'invite de commandes
  2. Lister les fichiers
  3. Se déplacer dans le système de fichiers
  4. Manipuler les fichiers
  5. 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.