//img.uscri.be/pth/c51ab3221c18f2d3d2681997073d6c55680813f1
Cet ouvrage fait partie de la bibliothèque YouScribe
Obtenez un accès à la bibliothèque pour le lire en ligne
En savoir plus

Sass et Compass avancé

De
301 pages


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



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




  • 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


    • 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 plusieurs 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



Voir plus Voir moins
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
Sass&Compass avancé
Grâce à Sass et à son framework CSS3 Compass, les intégrateurs et développeurs web professionnels confrontés à des impératifs de productivité et de maintenabilité disposent enfin d’outils libres pour écrire de façon cohérente leurs feuilles de styles CSS. Sass, un must pour optimiser l’écriture des feuilles de styles CSS Porté par une communauté très active, le préprocesseur libre Sass offre un arsenal de fonctions pour la productivité du développeurfront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.
Au sommaire Installation de Sass et CompassInstaller Sass, Compass… et Ruby ?Environnements graphiques disponiblesPre mière conversion d’un fichier Sass en feuille CSSSyntaxes de SassDeux choix de syntaxe : Sass et SCSSImbriquer les règles Différents niveaux de commentaires Variables Diviser et être plus efficace Réutiliser son code : introduction aux mixinsPassage d’un bloc de contenu à un mixinHéritage avec @extendMaîtriser l’héritage avec les placeholdersSupport des Media QueriesPièges à éviterDévelopper avec SassSass et les donnéesDes mathématiques dans vos CSSDirectives de contrôleManipulations avancées avec les fonctionsPremier projet Sass et contraintes de productionInitialiser l’arborescence du projetCompiler un projet SassUtiliser des bibliothèques SassInitialisation de projet facile avec CompassCompass centralise la configuration du projetCompiler un projet CompassUtiliser des bibliothèques Sass dans un projet CompassCompass, votre futur meilleur amiAccès simplifié aux ressources statiquesUne boîte à outils DRYUn framework CSS3Support multinavigateur (cross browser)Création de sprites CSS avec CompassQu’estce qu’un sprite CSS ?Les sprites, une nécessitéLa magie de Compass pour la génération de spritesMaîtriser les sélecteursOptimiser ses spritesEn finir avec des compilations trop longuesGérer un projet Compass : un peu de méthodologieDe la bonne gestion des versions de Sass et CompassDéboguer un projet SassTravailler en équipeConfiguration avancée avec CompassMaintenir un casseur de cache personnaliséAfficher des notifications Growl sous Mac OS XPartager des fichiers entre plusieurs projetsGuide de survie de l’interface en ligne de commandeL’invite de commandesLister les fichiersSe déplacer dans le système de fichiersManipuler les fichiersMotifs 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
Mehdi Kabab Expert frontend pour le cabinet d’expertises Clever Age (Lyon),Mehdi Kababest aussi développeur web. Son expertise l’amène à intervenir sur tout type de projet : de l’intégration one shotjusqu’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
Chezlemêmeéditeur
danslaColleCtiondesignweb
danslaColleCtiona bookapart
danslaColleCtionmémento
Retrouvez aussi nos livres numériques sur http://izibook.eyrolles.com
Sass &Compass avancé
Optimiser ses feuilles de style CSS
M e h d i K a b a b
Préface de Raphaël Goetter
ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris. © Groupe Eyrolles, 2013, ISBN : 978-2-212-13677-7
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 sim plicité 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’étaitavant. 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, fluctue petit à petit pour devenir le métier plus polyvalent dedéveloppeurfront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éna ture CSS (oui, moi je fais duvraiCSS), ça produit une « soupe » de code, ça rajoute un niveau de complexité, etc.
VI
Sass et Compass
Ajoutez à cela que je ne supporte guère la lecture des règles imbriquées dans les pré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 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 rende ment 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 : 1Un préprocesseur n’est ni du CSS ni une extension de CSS, ilproduitsimplement du CSS. 2Un 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 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 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 ces outils inévitablement appelés à devenir les compagnons fidèles de notre quotidien.
Raphaël Goetter www.goetter.fr fondateur d’Alsacréations
Table des matières
Avantpropos ................................................................................. 1 Pourquoi ce livre ?. . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . À qui s’adresse cet ouvrage ?. . . . . . . . . . . . . . . . . . . 3. . . . . . . . . . . . . . . . . . . . . . . Structure de l’ouvrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Remerciements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4. . . . . . . . . . . . . . . . . . . . . .
CHAPITRE1 Installation de Sass et Compass ................................................... 5 Installer Sass, Compass… et Ruby ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Installation sous Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Ouvrir le terminal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Mettre à jour les paquets Ruby (RubyGems) . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 En cas de problème sous Mac OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Installation sous Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Ouvrir l’invite de commandes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Installer Ruby. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Installer Sass et Compass depuis RubyGems . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Installation sous Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Environnements graphiques disponibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 L’environnement Compass.app pour Linux, Windows et OS X . . . . . . . . . . . . 15 Le compilateur Scout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Prepros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 CodeKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Mixture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Première conversion d’un fichier Sass en feuille CSS. . . . . . . . . . . . . . . . . . . . . 17. Session interactive de Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
VIII
Sass et Compass
CHAPITRE2 Une syntaxe de Sass .................................................................... 21 Deux choix de syntaxe : Sass et SCSS22. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . De CSS à SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Imbriquer les règles, une révolution. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Sélecteur parent & . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Imbriquer les groupes de sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Sélecteurs avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Les propriétés imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Différents niveaux de commentaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Les commentaires silencieux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Conserver les commentaires de licence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Les variables. . . . . . . . . . . . . . . . . . . . . . . 35. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Déclarer et utiliser une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Portée d’une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Portée locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Écraser une variable globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Variable globale ou locale ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42 Interpoler une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Diviser et être plus efficace43. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Les feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Mise en pratique des feuilles de styles partielles . . . . . . . . . . . . . . . . . . . . . . . . .46 Importations imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Limites de l’instruction @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51 Définir des variables par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Réutiliser son code : introduction aux mixins. . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Définir un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Appeler un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Règles CSS dans les mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Passage d’arguments à un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Arguments par défaut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Liste d’arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Passage d’un bloc de contenu à un mixin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Héritage avec @extend. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Utiliser l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Du bon usage de l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Implications pour les règles imbriquées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Création de sélecteurs nuisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Maîtriser l’héritage avec les placeholders74. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .