Học lap trình Web với các ngôn ngữ CSS3, HTML 5 và Javascript. Dành cho các bạn sinh viên, người muốn tìm hiểu để làm các trang web đẹp, các design thiết kế frontend một ứng dụng web. Sách bằng tiếng anh Sass là cách để viết CSS một cách trực quan, cô đọng hơn, tránh trùng lặp. Sau đó từ Sass sẽ chuyển đổi thành file CSS bình thường
Sass & Compass avancộ Optimiser ses feuilles de styles CSS Mehdi Kabab 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 doutils 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, loutil permet de concevoir des arborescences de projets extrờmement robustes Lorganisation logique en plusieurs fichiers permet un travail dộquipe efficace, condition de sassurer que tous les protagonistes se dotent de versions identiques des outils Compass, le framework CSS3 pour Sass, permet dassurer 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 dimages de sprites CSS auquel tout un chapitre est dộdiộ : la gộnộration dimages de sprites haute dộfinition naura jamais ộtộ aussi simple ! Une rộfộrence mộthodologique pour lintộgrateur web ẫcrit par lun des pionniers de lutilisation de Sass/Compass et prộfacộ par Raphaởl Goetter, fondateur dAlsacreations.fr, cet ouvrage est un must pour lintộ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 Mehdi Kabab Expert front-end pour le cabinet dexpertises Clever Age (Lyon), Mehdi Kabab est aussi dộveloppeur web Son expertise lamốne intervenir sur tout type de projet : de lintộgration one shot jusquaux solutions CMS complexes Auteur dun 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) luniversitộ Lumiốre Lyon Retrouvez-le sur Twitter @piouPiouM ! Au sommaire Installation de Sass et Compass Installer Sass, Compass et Ruby ? Environnements graphiques disponibles Premiốre conversion dun fichier Sass en feuille CSS Syntaxes de Sass Deux choix de syntaxe : Sass et SCSS Imbriquer Au dộveloppeur-intộgrateur qui cherche sapproprier le prộprocesseur CSS Sass et son framework CSS3 Compass ; lintộgrateur expộrimentộ qui souhaite optimiser sa mộthode de travail pour garantir la maintenabilitộ de ses sites ; Au chef de projet qui cherche sassurer que tous les intervenants dun projet travaillent avec les mờmes outils @ Tộlộchargez le code source des exemples sur le site daccompagnement du livre http://www.editions-eyrolles.com Conception : Nord Compo qui sadresse cet ouvrage ? Code ộditeur : G13677 ISBN : 978-2-212-13677-7 les rốgles Diffộrents niveaux de commentaires Variables Diviser et ờtre plus efficace Rộutiliser son code : introduction aux mixins Passage dun bloc de contenu un mixin Hộritage avec @extend Maợtriser lhộ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 larborescence 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 Quest-ce quun 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 linterface en ligne de commande Linvite de commandes Lister les fichiers Se dộplacer dans le systốme de fichiers Manipuler les fichiers Motifs de remplacements Sass & Compass avancộ Optimiser ses feuilles de style CSS Chez Dans Dans le mờme ộditeur la collection la collection Dans Design web A Book Apart la collection Mộmento Retrouvez aussi nos livres numộriques sur http://izibook.eyrolles.com pII_Kabab.indd 30/09/13 09:25 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 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 lautorisation de lẫditeur ou du Centre Franỗais dexploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris â Groupe Eyrolles, 2013, ISBN: 978-2-212-13677-7 Copyright_Kabab.indd 30/09/13 09:26 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 sadapter des contraintes nouvelles Mon mộtier dintộ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 sest complexifiộ au cours de ses versions et 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 doutils permettant de faciliter et daccộlộrer notre travail quotidien dintộ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 nest 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 VI Sass et Compass 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, cest bien quils 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 Jai appris en surmonter quelques-unes partir du moment oự jai assimilộ trois points essentiels les concernant : Un prộprocesseur nest ni du CSS ni une extension de CSS, il produit simplement du CSS Un prộprocesseur ne produit pas forcộment du code sale, il ne fait que ce que vous lui dites de faire (Corollaire du 2.) Si vous ne connaissez pas bien CSS, un prộprocesseur produira du code sale Nul doute que chacun de nous sache sadapter 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, lun deux parvient me construire des sprites CSS automatiquement sans que jaie marracher un seul cheveu, comme le fait dộj Compass, cest moitiộ gagnộ pour moi ! Le livre de Kaelig (Deloumeau-Prigent) ma donnộ envie de tester des prộprocesseurs et de jouer avec ; celui de Mehdi ma ouvert les yeux sur lộvidence de les employer rộguliốrement dans mon travail dintộgrateur Sass et Compass sont aujourdhui 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 louvrage de Mehdi soit publiộ et men apprenne plus sur ces outils inộvitablement appelộs devenir les compagnons fidốles de notre quotidien Raphaởl Goetter www.goetter.fr fondateur dAlsacrộations Table des matiốres Avant-propos Pourquoi ce livre ? qui sadresse cet ouvrage ? Structure de louvrage Remerciements CHAPITRE Installation de Sass et Compass Installer Sass, Compass et Ruby ? Installation sous Mac OS X Ouvrir le terminal Mettre jour les paquets Ruby (RubyGems) Installer Sass et Compass depuis RubyGems En cas de problốme sous Mac OS X 10 Installation sous Windows 12 Ouvrir linvite de commandes 12 Installer Ruby 12 Installer Sass et Compass depuis RubyGems 14 Installation sous Linux 14 Environnements graphiques disponibles 15 Lenvironnement Compass.app pour Linux, Windows et OS X 15 Le compilateur Scout 16 Prepros 16 CodeKit 16 Mixture 16 Premiốre conversion dun fichier Sass en feuille CSS 17 Session interactive de Sass 19 En rộsumộ 20 VIII Sass et Compass CHAPITRE Une syntaxe de Sass 21 Deux choix de syntaxe : Sass et SCSS 22 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 dune 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 efficace 43 Les feuilles de styles partielles 45 Mise en pratique des feuilles de styles partielles 46 Importations imbriquộes 49 Limites de linstruction @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 darguments un mixin 59 Arguments par dộfaut 61 Liste darguments 62 Passage dun bloc de contenu un mixin 64 Hộritage avec @extend 66 Utiliser lhộritage 66 Du bon usage de lhộritage 70 Implications pour les rốgles imbriquộes 71 Crộation de sộlecteurs nuisibles 72 Maợtriser lhộritage avec les placeholders 74 Guide de survie de linterface en ligne de commande ANNEXE B Afficher la liste des fichiers du rộpertoire courant sphax:~ mehdi$ ls Applications Downloads Code Dropbox Desktop Hello World.txt Documents Library Public Pictures README Sites Movies Music Faciliter la lecture de la liste de fichiers La distinction entre les dossiers et les fichiers nest pas facile faire dans lexemple prộcộdent Ajoutez loption -p la commande pour voir safficher le caractốre / la fin des dossiers : Des fichiers visibles au premier coup dil sphax:~ mehdi$ ls -p Applications/ Downloads/ Code Dropbox/ Desktop/ Hello World.txt Documents/ Library/ Public/ README Movies/ Music/ Pictures/ Sites/ La sortie est dộj plus lisible et fait ressortir le fichier Code qui pouvait ờtre considộrộ comme un rộpertoire de par son absence dextension Notez que vous pouvez remplacer loption -p par loption -F pour diffộrencier plus de types de fichiers, comme les liens symboliques (sortes de raccourcis vers un autre fichier ou rộpertoire) Pour gagner encore en lisibilitộ, vous pouvez afficher une sortie en couleurs laide de loption -G sous Mac OS X (et tout systốme BSD) ou loption color sous Linux Enfin, le format daffichage condensộ peut ờtre difficile lire, ou pas assez informatif (il ne donne pas le poids des fichiers, par exemple) La commande ls dispose de loption -l (avec un L minuscule) pour produire une sortie enrichie : Sortie longue de la commande ls sphax:~ mehdi$ ls -l total 10 drwxr-xr-x mehdi -rw-r r-13 mehdi drwx + mehdi drwx + 12 mehdi drwx + 516 mehdi drwx @ 17 mehdi -rw-r r-1 mehdi drwx @ 57 mehdi staff staff staff staff staff staff staff staff 204 2599 204 408 17544 578 1938 17 31 20 19 21 19 21 aoỷ jul aoỷ aoỷ aoỷ aoỷ aoỷ aoỷ 02:12 23:23 14:29 10:52 01:01 11:50 02:17 11:28 Applications Code Desktop Documents Downloads Dropbox Hello World.txt Library 271 272 Sass et Compass drwx + drwx + drwx + drwxr-xr-x+ -rw-r r-drwxr-xr-x mehdi mehdi mehdi mehdi mehdi mehdi staff staff staff staff staff staff 102 136 272 170 68 12 27 23 14 21 14 dộc dộc jan dộc aoỷ dộc 2012 Movies 2012 Music 2013 Pictures 2012 Public 02:24 README 2012 Sites Il est possible de combiner plusieurs options comme ls -l -p color, voire de regrouper toutes les options dune seule lettre : ls -lp color (ls -lpG sous Mac OS X) Loption -h (pour human) permet dafficher le poids des fichiers dans un format plus facilement comprộhensible par un humain (nous parlons rarement en octets) : Des poids de fichiers comprộhensibles sphax:~ mehdi$ls -lFh total 10 drwxr-xr-x mehdi -rw-r r-13 mehdi drwx + mehdi drwx + 12 mehdi drwx + 516 mehdi drwx @ 17 mehdi -rw-r r-1 mehdi drwx @ 57 mehdi drwx + mehdi drwx + mehdi drwx + mehdi drwxr-xr-x+ mehdi -rw-r r-1 mehdi drwxr-xr-x mehdi staff staff staff staff staff staff staff staff staff staff staff staff staff staff 204B 2,5K 204B 408B 17K 578B 0B 1,9K 102B 136B 272B 170B 0B 68B 17 31 20 19 21 19 21 12 27 23 14 21 14 aoỷ jul aoỷ aoỷ aoỷ aoỷ aoỷ aoỷ dộc dộc jan dộc aoỷ dộc 02:12 Applications/ 23:23 Code 14:29 Desktop/ 10:52 Documents/ 01:01 Downloads/ 11:50 Dropbox/ 02:17 Hello World.txt 11:28 Library/ 2012 Movies/ 2012 Music/ 2013 Pictures/ 2012 Public/ 02:24 README 2012 Sites/ Vous pouvez vous reporter laide intộgrộe votre systốme dexploitation pour en apprendre davantage sur cet affichage, par exemple laide de la commande man ls (man comme manuel) Afficher les fichiers cachộs Dans les diffộrents chapitres du livre, il est question de dossiers cachộs comme sassou encore vendors/ Sur les systốmes de type Unix (*nix comme Linux, BSD, Mac OS X, etc.), un fichier est masquộ lorsquil dộbute par un point (comme le fichier htaccess dont vous avez certainement dộj croisộ la route) cache/, bundle/ Guide de survie de linterface en ligne de commande ANNEXE B Pour les afficher, ajoutez loption -a la commande ls : Sans affichage des fichiers cachộs sphax:demo mehdi$ ls -F Gemfile css/ Gemfile.lock index.html sass/ Avec laffichage des fichiers cachộs sphax:demo mehdi$ ls -aF / sass-cache/ Gemfile.lock sass/ / vendors/ css/ bundle/ Gemfile index.html Se dộplacer dans le systốme de fichiers Vous pouvez changer de rộpertoire avec la commande cd (pour change directory) La commande cd attend pour seul argument le nom de la nouvelle destination : sphax:~ mehdi$ cd Documents sphax:Documents mehdi$ Notez que linvite de commande a changộ pour afficher le nouveau rộpertoire de travail Utilisez la commande pwd pour vộrifier le chemin daccốs complet du rộpertoire courant : sphax:Documents mehdi$ pwd /Users/mehdi/Documents Revenir dans son rộpertoire personnel Trois mộthodes existent pour revenir dans votre rộpertoire personnel De la plus longue la plus rapide nous avons : cd /User/ avec correspondant votre nom dutilisateur (ou /home/ sous Linux) ; cd ~ ; ou simplement cd dộpourvu dargument 273 274 Sass et Compass Remonter dans larborescence Dans la section sur les fichiers cachộs, lexemple affichait les deux dossiers cachộs / et / qui reprộsentent respectivement le dossier listộ et un accốs son rộpertoire parent Ainsi, utilisez la commande cd pour remonter au dossier parent Vous pouvez remonter de plusieurs niveaux dans larborescence en sộparant plusieurs par un slash : Descendre et remonter dans larborescence de fichiers sphax:~ mehdi$ cd ~ sphax:~ mehdi$ cd Documents/ sphax:Documents mehdi$ pwd /Users/mehdi/Documents sphax:Documents mehdi$ cd sphax:~ mehdi$ pwd /Users/mehdi sphax:~ mehdi$ cd Documents/Articles/Blog/ sphax:Blog mehdi$ pwd /Users/mehdi/Documents/Articles/Blog sphax:Blog mehdi$ cd / sphax:Documents mehdi$ pwd /Users/mehdi/Documents Alterner entre deux emplacements Si vous devez vous dộplacer plusieurs fois entre deux dossiers, utilisez le raccourci cd (avec un tiret) aprốs vous ờtre dộplacộ la premiốre fois La commande affiche le nouveau rộpertoire aprốs son exộcution Ainsi, si je me positionne dans mon rộpertoire utilisateur : sphax:Documents mehdi$ cd sphax:~ mehdi$ pwd /Users/mehdi puis que je me dộplace dans un rộpertoire diffộrent : sphax:~ mehdi$ cd Documents/Articles/Blog/ sphax:Blog mehdi$ pwd /Users/mehdi/Documents/Articles/Blog Guide de survie de linterface en ligne de commande ANNEXE B je peux maintenant retourner au prộcộdent emplacement (mon rộpertoire utilisateur) avec la commande cd - sphax:Blog mehdi$ cd /Users/mehdi Je peux aussi saisir la commande cd / / parce que je veux remonter de trois niveaux dans larborescence du systốme de fichiers, mais cest bien plus long Je peux ainsi trốs facilement alterner entre les deux emplacements : sphax:~ mehdi$ cd /Users/mehdi/Documents/Articles/Blog sphax:Blog mehdi$ cd /Users/mehdi sphax:~ mehdi$ cd /Users/mehdi/Documents/Articles/Blog Manipuler les fichiers Crộer un fichier Crộez un nouveau fichier laide de la commande touch : Crộer un fichier Gemfile vide $ touch Gemfile Un fichier vide est alors crộộ La commande touch accepte un ou plusieurs noms de fichiers qui peuvent ờtre situộs diffộrents niveaux darborescence : Crộation de trois fichiers vides $ touch Gemfile config.rb sass/styles.scss Crộer un rộpertoire Crộez un rộpertoire avec la commande mkdir (pour make directory) : 275 276 Sass et Compass Crộer le rộpertoire du projet et un sous-dossier sass/ $ mkdir projet $ cd projet $ mkdir sass $ ls -F sass/ La commande mkdir accepte un ou plusieurs noms de dossier : Crộation de trois rộpertoires en une seule commande $ mkdir css img js $ ls -F css/ img/ js/ sass/ La commande mkdir produira une erreur si vous lui demandez de crộer un sousrộpertoire dans un rộpertoire qui nexiste pas encore Cest--dire quelle ne peut pas crộer darborescence : $ cd ~ $ mkdir projet2/sass mkdir: projet2: No such file or directory Ajoutez loption -p et la commande mkdir crộera larborescence demandộe : $ mkdir -p projet2/sass $ ls -F projet2/ sass/ Copier des fichiers La copie dun fichier seffectue laide de la commande (pour copy) : cp Copier un fichier $ cp screen.scss ie.scss Vous pouvez cibler des fichiers situộs dans des rộpertoires extộrieurs au dossier courant Dans lexemple qui suit, le fichier config.rb dun autre projet est copiộ dans le rộpertoire courant Parce que nous souhaitons conserver le mờme nom de fichier, nous indiquons le dossier courant (./) comme destination de la copie : Guide de survie de linterface en ligne de commande ANNEXE B Copie dun fichier extộrieur au projet $ cp /autre-projet/config.rb / Si nous voulons changer le nom du fichier copiộ, il suffit de le prộciser : Copier un fichier dans un fichier avec un nom diffộrent $ cp /autre-projet/config.rb compass.rb La copie dun rộpertoire nộcessite lajout de loption -r ou -R la commande : Copier du dossier partials/ dun autre projet dans le rộpertoire sass/ du dossier courant $ cp -r /autre-projet/sass/partials sass/ ATTENTION Copie de dossier sous Mac OS X Sous Mac OS X et tout autre systốme BSD, si vous ajoutez un slash (/) au dossier source, seul le contenu du dossier sera copiộ et non le dossier lui-mờme ! Dộplacer des fichiers La commande mv fichiers et des rộpertoires : (pour move) permet de dộplacer des Dộplacer un fichier dun autre projet dans le rộpertoire courant $ mv /autre-projet/styles.scss / Dộplacer un fichier du rộpertoire courant dans un autre projet $ mv styles.scss /autre-projet/ La commande mv est ộgalement utilisộe pour renommer les fichiers puisquau final cela revient dộplacer un fichier sous un nom diffộrent : Renommer un rộpertoire $ mv projet1 projet2 277 278 Sass et Compass Supprimer des fichiers ATTENTION Une suppression irrộversible Linterface en ligne de commande ne dispose pas de corbeille Cest dire que tout fichier ou dossier supprimộ sera irrộmộdiablement perdu, sans possibilitộ de retour en arriốre comme cest le cas avec la corbeille Prộfộrez passer par lexplorateur de fichiers de votre systốme dexploitation si vous avez la moindre hộsitation quant aux arguments passer la commande rm Supprimez un ou plusieurs fichiers laide de la commande rm (pour remove) Une confirmation de suppression des fichiers vous sera demandộe Rộpondez-y par y (pour oui) pour confirmer ou n (pour non) pour dộcliner laction : Supprimer un fichier $ rm css/screen.css remove css/screen.css? y Supprimer plusieurs fichiers $ rm css/screen.css css/print.css remove css/screen.css? y remove css/print.css? y Il est possible de confirmer par dộfaut la suppression des fichiers en ajout loption -f (pour forcer) la commande : Supprimer plusieurs fichiers sans confirmation $ rm -f css/screen.css css/print.css La suppression dun rộpertoire est par dộfaut interdite Prộcisez loption pour autoriser leffacement rộcursif dun dossier : La suppression dun dossier ộchoue $ rm css rm: css: is a directory Supprimer un rộpertoire sans confirmation $ rm -rf css -r ou -R Guide de survie de linterface en ligne de commande ANNEXE B ATTENTION sudo rm -rf / Des plaisantins samusent parfois aux dộpens des personnes les moins expộrimentộes avec le shell Lexemple le plus connu est la commande sudo rm -rf / donnộe en rộponse une question posộe sur un forum Ne lancez jamais cette commande, qui a pour effet de lance la suppression de tout le contenu de votre disque dur ! Linstruction sudo est utilisộe pour obtenir les permissions nộcessaires la manipulations des fichiers de tout le systốme Elle est associộe la commande rm forcộe (-f) sur la racine du disque dur (/), et ce de maniốre rộcursive (-r) Je ne peux que vous conseiller dờtre attentif avant dexộcuter toute commande de suppression rm Motifs de remplacements Toutes les commandes abordộes dans cette annexe acceptent les deux motifs de remplacement suivants : lastộrisque * pour reprộsenter nimporte quelle succession de caractốres ; le point dinterrogation ? pour reprộsenter nimporte quel caractốre Par exemple, pour afficher la liste de toutes les images PNG du rộpertoire courant, vous allez utiliser la commande ls *.png : $ ls connectivity.png effects_3d.jpg multimedia.png performance.png device_access.gif logo.png offline_storage.png semantics.jpg $ ls *.png connectivity.png effects_3d.png multimedia.png logo.png offline_storage.png performance.png Le motif de remplacement peut-ờtre ộcrit nimporte quel endroit Dans lexemple qui suit, le motif * est utilisộ pour copier tous les fichiers SCSS qui commencent par la chaợne de caractốres ie : $ ls sass/ app.scss $ ls /autre-projet/sass/ ie.scss ie8.scss ie7.scss screen.scss $ cp /autre-projet/sass/ie*.scss sass/ $ ls sass/ app.scss ie7.scss ie.scss ie8.scss 279 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 A Arborescence organiser 124 renforcer 129 B Bibliothốque 144, 158 charger 145, 158 installer 145 Bonnes pratiques prộfixer 122 variable par dộfaut 55 Boucles 110, 112 rebours 111 Bundler 231, 232, 243, 252 dộclarer des gems 233 dộsinstaller 233 installer 233 maintenir 236 nettoyer 237 publier 237 utiliser 233, 235 C Cache 143, 157 buster voir Casseur de cache Canal alpha 107, 117, 118 couleur (de) 107 Cas dusage @content 82 @extend 88 commentaire important 34 silencieux 33 fonction zip 118 Internet Explorer 27, 64, 110 placeholder 76, 89, 91 portộe de variable 41 sộlecteur parent 27 sprites CSS gộnộration automatique 213 haute dộfinition 217 par dimensions 221 valeur null 99 variable par dộfaut 54 Cascade CSS 72, 84, 87, 88, 239 Casseur de cache 162 dộsactiver 162 personnaliser 260 Chrome 1, 74, 177, 241, 243, 245, 247 Clever Age 2, 4, 182 Code tierce partie 128 CodeKit 16 Commentaire CSS 33 important 34 silencieux 33 supprimer 33 Compass histoire installation versions 6, 200, 202, 203, 212 Compass.app 15 Compiler automatiquement 143, 157 manuellement 142, 156 Sass et Compass 282 un fichier Sass 17, 24 un projet Compass 156 un projet Sass 142 Concatộnation 106 Conflit merge 253 rộsoudre 253, 254 Cookieless 125, 153, 154 Cross-browser 159, 160, 176, 179, 180, 220 CSS cascade 87 hack 182 sộlecteurs 31, 78 CSS3 @font-face 174 background (multiple) 62, 177 border-radius 171 box-shadow 172 linear-gradient 178, 181 radial-gradient 177 sộlecteurs 31 text-shadow 174 D Data-URI 164 sprite CSS 202 Dộboguer 239 Source Maps voir Source Maps Dộfinition hộritage 66 mixin 55 Source Maps 242 sprite CSS 186 sprite map 187 sprite sheet 187 variable 36 Division (opộrateur de) 103, 106 Documentation 166 DRY 66, 69, 88, 97, 120, 165, 169 E ẫquipe 252 Extension css 51 sass 22 scss 22 optionnelle 45 F Feuille de styles partielle 45, 49, 53, 125 rộutiliser 130 Fichier de configuration 149, 150 options (liste) 151 Firebug 239 Firefox 74, 177, 180, 183, 241, 243, 245 Fonction arguments (optionnels) 114 chaợnes (sur les) 114 couleurs (sur les) 115 crộer 121 font-files 176 headers 176 hsl 96 hsla 96 image-url 161 introspection 120 listes (sur les) 118 numộriques 115 rgb 95, 107 rgba 96, 107 type-of 97 url 45, 51, 161 utilitaires 121 front-end 2, 25, 34, 44, 100 G Gemfile 231, 232, 233, 243, 273 Gemfile.lock 234, 236, 238 Git 238 conflit (rộsoudre) 253, 254 Github 128, 145, 170 Google Font API 51 Growl 262 GUI voir Interface graphique Guillemets (choix de) 95 H Haml 22 Haute dộfinition 217 Hộritage 66, 83, 88 Index maợtriser 74 placeholder 75 sộmantique 70, 74 utiliser 69 HSL 96, 115 Internet Explorer 27, 64, 117, 181, 182 dộsactiver (support) 184 filtre 95, 178 Interpolation 42, 104, 111 Introspection 120 I K Image 161 Data-URI 164 dimensions 163 Imbriquer @import 49 groupes de sộlecteurs 29 Media Queries 79 propriộtộs 32 rốgles voir Rốgles imbriquộes Importer 45, 49, 169 Inception 88 Installation de Compass de Ruby 6, 13 de Sass de XCode 10 sous Linux 14 sous Mac OS X sous Windows 12 Interface en ligne de commande 8, 124, 127, 270 cd 273 cp 276 ls 270 mkdir 275 mv 277 pwd 270 rộpertoire personnel 273 rm 278 sous Mac OS X (ouvrir) sous Windows (ouvrir) 12 touch 275 Interface graphique CodeKit 16 Compass.app 15 Mixture 16 Prepros 16 Scout 16 KISS 120 L Layout 75, 76, 77, 129, 132, 134, 210 Loud comment voir Commentaire important M Maintenance 21, 43, 51, 52, 56, 78, 123, 128, 129, 134, 135, 139, 182, 186, 189 Media Queries 65, 79, 82, 217, 220 imbriquer 79 limitations 83 variables 81 Mixin 57, 58 arguments 59 liste 62 par dộfaut 61 bloc de contenu 64 dộclarer 55 limitations 63, 65 utiliser 56, 67 Mixture 16 O oily_png 226 Optimiser arborescence 43 code 86 code (rộutiliser) 55 compilation 226 imbrications 86 poids 69, 135, 227 sộlecteurs 139, 207 P Partial voir Feuille de styles partielle Performance 34, 44, 74, 100, 125, 134, 164, 186 Placeholder 74, 89, 131, 135, 137 dộclarer 74 283 Sass et Compass 284 ộtendre 75 ordre 91 Plug-in voir Bibliothốque Prộfixes constructeurs 170 Prepros 16 Projet Compass configuration voir Fichier de configuration convetir en 148 crộer 146 Prompt voir Interface en ligne de commande Proxy 260 Pseudo-classes 25, 31 R Racine de projet 143 README (fichier) 133, 255 Rốgles imbriquộes 23, 25, 29, 31, 32, 39, 49, 57, 71, 75, 220 inception 88 surimbrication 85 Requờte de mộdia voir Media Queries Retina voir Haute dộfinition RGB 95, 107, 115 Ruby installation 6, 13 RubyGems 144, 158, 231 FilePermissionError mettre jour S Sass histoire 1, 22 versions 6, 114, 243 SassScript 19 Sassy CSS 22 Scout 16 Sộlecteur imbriquộ voir Rốgles imbriquộes parent 26, 31, 49, 58 cas dusage 27 limitations 28 syntaxe 26, 27, 28 pseudo-classes voir Pseudo-classes Session interactive de Compass 20 de Sass 19 quitter 19 SMACSS 134, 139 Source Maps 242 activer Compass 244 navigateur 245 Sass 243 dộfinition 242 lier un fichier 251 lier un projet 248 utiliser 247 workspace 248 Sprite CSS 221 classe de base 191 configurer 200 supprimer 200 configurer 193 crộer 190 Data-URI 202 dộfinition 186 dimensions 194 espacement 193 fonctions 209, 210 gộnộration automatique 190 manuelle 209 haute dộfinition 217 layout 200 mixins 209, 210 optimiser 207 optimiser (compilation) 226 ordonner 202 position 195 pseudo-classes 203 rộpộtition 197 Subversion 238 conflit (rộsoudre) 253 Surimbrication 85 Surveillance (de projet) 144, 157 arrờter 144, 157 SVG 95, 181 Syntaxe Index !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 112 argument multiple (caractốre ) 62 commentaire CSS 33 important 34 silencieux 33 indentộe (historique) 22 Media Queries 79 placeholder 74 SCSS 22 sộlecteur parent 26, 27, 28 variable 36, 38 T Terminal voir Interface en ligne de commande Test contitionnel 109 TSL 96 Types de donnộes 94 algốbre 103 boolộen 96, 108 chaợne 94, 106 comparer 101 couleur 95, 107 division 103, 106 liste 96, 102, 112 null (valeur) 98 numộrique 95, 104 tester 97 tests conditionnels 109 U Unicode 37 Unitộs calcul 104 correspondances 105 V Variable contenu 38 dộclarer 36 dộfinition 36 ộcraser 40 interpoler 42 Media Queries (expression) 81 par dộfaut 52, 53 portộe choix de 42 globale 40, 50, 65 locale 39, 50, 65 redộclarer 42 surcharger 139 syntaxe 36 unicode 37 X XCode 10 285 [...]... Installation de Sass et Compass CHAPITRE 1 Figure 12 Installation de Sass et Compass depuis le terminal Ainsi, linstallation de Sass et de Compass devient (voir figure 1-2) : Installation de Sass et Compass $ sudo gem install sass Password: Fetching: sass- 3.2.10.gem (100%) Successfully installed sass- 3.2.10 1 gem installed Installing ri documentation for sass- 3.1.0 Installing RDoc documentation for sass- 3.1.0... 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 Quon se le tienne pour dit, cest lorsquils sont exộcutộs en ligne de commande (depuis un terminal ou shell) que Sass et Compass. .. http://pioupioum.fr/ 1 Installation de Sass et Compass Linstallation de Sass et Compass ne pose aucune difficultộ y compris pour ceux qui sont peu habituộs aux outils en ligne de commande, condition quils ne se laissent pas impressionner SOMMAIRE B Installer Sass et Compass en ligne de commande B Choisir une alternative graphique B Transformer un fichier Sass en fichier CSS 6 Sass et Compass Ce chapitre vous guidera... utiliser le prộprocesseur Et pour cause, Compass nest quun 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... sudo gem install compass Fetching: compass- 0.12.2.gem (100%) Successfully installed compass- 0.12.2 1 gem installed Installing ri documentation for compass- 0.12.2 Installing RDoc documentation for compass- 0.12.2 RubyGems est capable de gộrer les dộpendances entre gems Linstallation de Compass, qui dộpend du prộprocesseur Sass, peut donc se rộsumer une seule commande Installation de Compass et de ses... no-ri no-rdoc" >> ~/.gemrc Les deux gems sont bien installộes $ sass -v Sass 3.2.10 (Media Mark) $ compass version Compass 0.12.2 (Alnilam) Copyright (c) 2008-2013 Chris Eppstein Released under the MIT License Compass is charityware Please make a tax deductable donation for a worthy cause: http://umdf.org /compass Figure 13 Sass et Compass sont installộs, le travail peut commencer ! En cas de problốme... 1-9) 13 14 Sass et Compass Figure 19 Ruby est correctement installộ Installer Sass et Compass depuis RubyGems Comme pour Mac OS X, Ruby est fourni avec le systốme de paquets RubyGems La procộdure dinstallation est donc identique, lexception que vous naurez jamais saisir linstruction sudo sous Windows Installation de Sass et Compass C:\Users\mehdi> gem install sass C:\Users\mehdi> gem install compass. .. crộation rapide de sites statiques Son support de Sass et Compass est bon, et permet mờme dutiliser lenvironnement Ruby et RubyGems de votre systốme B http://mixture.io/ Installation de Sass et Compass CHAPITRE 1 Premiốre conversion dun fichier Sass en feuille CSS Sass est fraợchement installộ sur votre systốme, que diriez-vous de transformer un premier fichier Sass en feuille de styles ? Crộez un fichier... commande sass oự est un fichier Sass et un fichier CSS Transformation par Sass du fichier en feuille de styles $ sass styles.scss style.css Le fichier gộnộrộ montre que Sass a automatiquement rộsolu les diffộrentes imbrications des sộlecteurs en sộlecteurs CSS valides styles.css nav h2 { margin-bottom: 8px; } nav li { margin-bottom: 1px; } 17 18 Sass et Compass nav... de sprites CSS de Compass la manipulation des sprites map naura plus de secret pour vous et maintenir des sprites haute dộfinition naura jamais ộtộ aussi simple Enfin, le chapitre 7 donne des pistes pour organiser et maintenir un projet Sass ou Compass en ộquipe ! Il y sera aussi question de dộbogage, notamment avec lintroduction du support de Source Maps dans Sass 3 4 Sass et Compass Il nous a paru ... Installation de Sass et Compass CHAPITRE Figure 12 Installation de Sass et Compass depuis le terminal Ainsi, linstallation de Sass et de Compass devient (voir figure 1-2) : Installation de Sass et Compass. .. GitHub B http://livre -sass- compass. fr B https://github.com/piouPiouM/livre -sass- compass- avance/ Remerciements Mes remerciements vont tout dabord aux dộveloppeurs de Sass et de Compass qui ont littộralement... de Sass et Compass Installer Sass, Compass et Ruby ? Environnements graphiques disponibles Premiốre conversion dun fichier Sass en feuille CSS Syntaxes de Sass Deux choix de syntaxe : Sass