Bonjour.
Dans cette vidéo, nous allons découvrir les avantages des préprocesseurs CSS.
Mais qu'est-ce qu'un préprocesseur CSS ?
Il s'agit d'un document spécifique écrit dans un langage similaire au code CSS, mais qui permet d'aller plus loin et de faire des choses que ne permet pas une feuille de style CSS normale.
Le principal intérêt d’un préprocesseur est d'éliminer les répétitions de code, et ce faisant, d'accélérer le workflow.
Super !
Le code CSS classique reprend souvent les mêmes propriétés CSS pour configurer, par exemple, la couleur, la taille et la position des éléments.
Un préprocesseur offre de nombreuses techniques qui vont nous permettre d'éviter ces répétitions, et c'est ce que nous allons voir dans cette vidéo.
Une feuille CSS traditionnelle reste incontournable.
Mais avant que cette feuille CSS soit créée, le code CSS va être traité en amont, d'où le terme « préprocesseur ».
Nous allons travailler sur le site que vous voyez actuellement.
Voyons comment il a été créé dans Dreamweaver.
Voici le code final du site, affiché en mode Développeur.
J'ai également défini le site dans Dreamweaver afin de gérer les fichiers du projet.
Pour suivre le tutoriel chez vous, vous devrez faire de même en sélectionnant le menu Site, Nouveau site.
Un autre tutoriel vidéo est consacré à la définition d'un site, si vous aviez besoin d'aide à ce sujet.
Ceci est le code HTML du site, affiché dans l'onglet Code source.
Passons au document « styles.css », dans le dossier des documents du projet.
Il s'agit d'une feuille CSS tout ce qu'il y a de plus classique.
Ce qui nous intéresse, c'est l'utilisation du blanc, c'est-à-dire ce code « #fff » qui apparaît à la ligne 102, et également plus bas, à la ligne 116.
Si je sélectionne ce code, puis le menu Recherche et la commande Rechercher et remplacer, Dreamweaver m'indique que ce code est en réalité utilisé 12 fois dans le document.
C'est beaucoup pour un aussi petit site, et c'est précisément dans ce type de cas que les préprocesseurs vont se révéler d'une grande utilité.
Je vais fermer ce document, qui est une version définitive.
Allons plutôt voir le fichier de style en ouvrant le document « rendered-index.html » que nous affichons dans un navigateur.
Dans cette version, le texte du haut est noir, tout comme le texte au centre.
D'autres éléments comme le pied de page apparaissent aussi en noir.
Je souhaite afficher ce texte en blanc, mais cette fois-ci en faisant appel aux préprocesseurs.
Pas facile à dire, « préprocesseur » !
Revenons dans Dreamweaver.
Commençons par créer notre préprocesseur CSS.
Comme vous pouvez le voir en observant mon dossier Files, il s'agit d'un site très simple, avec une page d'index et un document « styles.css », quelques dossiers, et c'est tout.
J'ai uniquement ces deux fichiers, à la racine.
Venons-en à la création du préprocesseur CSS.
Sélectionnez le menu Fichier, puis Nouveau.
Vous avez le choix entre plusieurs options : LESS, SCSS ou Sass.
Elles effectuent des tâches similaires.
Les trois offrent les avantages que nous avons évoqués tout à l'heure, mais leur syntaxe est différente.
Nous allons utiliser la version la plus récente, à savoir SCSS.
En effet, ce langage étant très similaire au code CSS standard, les designers web n'auront aucun problème avec.
Ensuite, cliquons sur Créer.
Enregistrons ce fichier.
Je vais appeler le mien « scss-styles », mais vous êtes libre de choisir un autre nom.
Cliquons sur Enregistrer.
Mon fichier apparaît bien ici, mais un fichier CSS supplémentaire a également été généré automatiquement.
Le grand avantage de cette méthode, c'est que Dreamweaver se charge de la préparation nécessaire à la compilation des fichiers.
Lorsque j'ai découvert les préprocesseurs, j'ai tout de suite compris les avantages qu'ils offraient.
Mais leur configuration était fastidieuse, avec des lignes de commande de compilation et d'autres étapes indispensables pour que tout fonctionne correctement.
C'était assez complexe, mais c'est maintenant intégré à Dreamweaver, et bien plus facile ainsi.
Vous avez donc la feuille CSS avec divers éléments déjà pré-configurés.
Lorsque vous allez démarrer votre site, vous n'aurez probablement pas de feuille CSS, mais uniquement la feuille SCSS.
Et vous utiliserez ce fichier, généré ou compilé par l'application.
Dans le cadre de ce tutoriel, nous allons utiliser les deux fichiers en parallèle.
La première chose à faire consiste à créer ce que l'on appelle une variable.
Rien de plus facile : une variable débute par le symbole dollar, suivi du nom de votre choix, à condition de ne pas utiliser d'espace ou de caractère spécial.
Limitez-vous aux chiffres et aux lettres, et ajoutez deux points à la fin.
Nous allons assigner une couleur à cette variable, en l'occurrence, la valeur « #fb00b4 », en terminant par un point-virgule.
La syntaxe est semblable au code CSS, ce qui facilite l'écriture.
Si vous n'avez encore jamais utilisé de variable, sachez qu'il suffit d'insérer ce code couleur dans le nom « $primary-color ».
Le principal intérêt de cette variable est que je vais pouvoir l'utiliser autant de fois que je le souhaite dans le site, sa valeur étant définie uniquement par ce petit bout de code.
Il suffit de modifier sa valeur ici pour changer la couleur partout où la variable apparaît.
Finis les « Rechercher et remplacer » !
Si les variables sont encore une énigme pour vous, voyons comment les utiliser, cela permettra d'éclaircir les choses.
Commençons par déterminer les éléments à mettre en forme.
J'affiche mon document HTML.
Je veux mettre en forme tout le texte à l'intérieur de cette classe, qui s'intitule...
La voilà ! ... « hero » Je veux changer la couleur du texte de cette classe, pour passer du noir à la couleur que nous définirons à l'aide de notre variable.
Je vais procéder de la même manière pour le texte du pied de page.
Revenons à la feuille SCSS.
Je tape un point, puis le nom de classe « hero », suivi d'accolades.
Je poursuis en insérant la propriété « color » — le mot « color » seul correspondant à la couleur de la police — puis deux points.
Je pourrais choisir la couleur à l'aide du sélecteur, mais je vous rappelle que l'objectif est justement d'éviter les répétitions de code.
Nous allons donc utiliser la variable.
Pour cela, insérez le symbole dollar, comme ci-dessus, saisissez « primary-color », et fermez à l'aide d'un point-virgule.
Le principe ici, est que cette variable agit comme un paramètre de substitution.
Dès que la variable « $primary-color » apparaît dans le code, elle est remplacée par le code couleur inséré dans la définition de la variable.
Dreamweaver effectue cette substitution lors de la compilation du code.
Après avoir vu comment procéder dans la feuille SCSS, observons la version définitive de la feuille CSS compilée, qui figure ici.
Je vais simplement l'ouvrir.
Et voilà ma feuille CSS, automatiquement générée par la feuille SCSS.
Cette feuille CSS standard peut être lue par les navigateurs web, le code couleur étant inséré à la place du paramètre de substitution.
C'est cette feuille CSS qui servira à la conception de notre page.
Pour cela, nous devons l'utiliser dans notre document HTML.
Au début du code, voici la feuille CSS utilisée précédemment.
Je dois maintenant ajouter la nouvelle feuille, en plaçant le curseur à l'intérieur de cette ligne.
J'appuie sur Commande + D sur un Mac, ou Ctrl + C sur un PC, pour dupliquer la ligne.
Ensuite, j'efface le nom de cette feuille, et le remplace par celui de la nouvelle feuille.
J'ai maintenant mes deux feuilles de style.
La première correspond à la feuille CSS originale, la seconde, à la nouvelle version générée par le préprocesseur.
Il ne s'agit pas de la feuille SCSS elle-même, mais du fichier compilé par Dreamweaver.
Les deux documents ont le même nom, mais celui-ci porte l'extension .css.
Voyons maintenant le résultat dans le navigateur.
Et voilà !
Un superbe rose !
Le pied de page lui est noir.
Revenons à notre préprocesseur pour appliquer le même traitement.
J'insère un identifiant « footer », puis une propriété « color » qui s'appliquera au pied de page, et j'ajoute la variable en procédant par copier-coller pour éviter les fautes de frappe.
Voyons le résultat dans le navigateur.
Le pied de page est bien rose !
Récapitulons rapidement ce que nous venons de voir.
J'ai utilisé la feuille SCSS pour générer la feuille CSS que voici, avec les couleurs que j'ai choisies.
Cette feuille est ensuite utilisée par la page HTML.
Cela ajoute une étape, me direz-vous.
En réalité, il n'y a pas d'étape supplémentaire.
Dreamweaver compile automatiquement la feuille CSS et relie le tout à la page HTML.
Pour ma part, je travaille uniquement sur la feuille SCSS.
Pourquoi procéder ainsi ?
Parce que les variables sont extrêmement pratiques.
Cet exemple particulier est très simple, mais supposons que je souhaite appliquer une modification et que cette variable « $primary-color » apparaisse des milliers de fois dans le document.
Je peux sélectionner cette valeur, et plutôt que de rechercher et remplacer chaque occurrence, il me suffit de la saisir ici.
À la place de mon superbe rose, je vais remplacer ce code par « #fff », ce qui correspond au blanc.
J'enregistre.
Le code CSS est compilé et l'aperçu en temps réel dans le navigateur passe automatiquement au blanc.
Et cela vaut également pour le titre en haut de la page.
Nous ne sommes intervenus que sur la couleur de la police, mais cela marche aussi pour changer la famille de polices, l'espacement, le remplissage, les marges, ou tout autre paramètre.
Définissez votre variable, puis reportez-la dans le code pour bénéficier d'un contrôle global de chaque propriété.
L'utilisation des variables n'est que l'un des avantages des préprocesseurs.
Étudions maintenant une autre technique, intitulée « Imbrication ».
L'imbrication est une méthode qui permet de calquer la structure des sélecteurs CSS sur la hiérarchie de la page HTML.
Revenons à notre document HTML, et plus particulièrement au code source.
Supposons que je souhaite mettre en forme cet élément « ul », c'est-à-dire la liste non ordonnée utilisée pour créer ce système de navigation en haut de la page.
J'aimerais, notamment, supprimer le soulignement, afficher les éléments en majuscules, bref, tester différentes choses.
De retour dans Dreamweaver, la solution consiste à créer en CSS ce que l'on appelle un sélecteur composé, qui agit sur les balises « a » placées à l'intérieur des éléments de liste « li », eux-mêmes à l'intérieur des listes « ul » placées dans une balise « nav ».
Cela est possible, mais il est plus facile de reproduire cette imbrication dans un préprocesseur.
Cela facilitera le contrôle de la mise en forme des éléments.
Pour ce faire, revenons à notre feuille SCSS.
Je souhaite mettre en forme la classe « .site-nav » qui figure dans le code HTML.
En règle générale, CSS s'arrête à ce niveau, il n'est pas possible d'ajouter d'autres classes entre les accolades.
Mais, avec ce préprocesseur SCSS, c'est possible.
À l'intérieur de cette classe, je peux ajouter une liste « ul » et lui appliquer la propriété « list-style-type » avec la valeur... « none », point-virgule, ce qui aura pour effet de supprimer les puces de la liste.
Je dois ensuite reproduire pour les éléments de liste « li » la même structure que dans la page HTML.
Les éléments « li » sont à l'intérieur des éléments « ul », eux-mêmes à l'intérieur de la classe « site-nav ».
Revenons ici.
Je retrouve la classe « .site-nav », et la liste « ul » dans laquelle j'ajoute l'élément de liste « li », c'est-à-dire les puces de la liste non ordonnée.
J'ajoute une paire d'accolades.
Et voici ma structure imbriquée : les éléments « li » à l'intérieur de l'élément « ul », sous la classe « .site-nav ».
Je peux maintenant définir une marge inférieure « margin-bottom » de « 3.75 em », et j'ajoute un point-virgule.
J'enregistre.
Jetons un rapide coup d'œil au code généré en revenant à la page « rendered-index.html », puis à la feuille « scss-styles » que nous avons créée.
Le code généré apparaît au niveau de cette première ligne, avec l'élément « ul » à l'intérieur de la classe « .site-nav », mais aussi de cette autre ligne, car nous avons imbriqué les éléments « li » à l'intérieur des éléments « ul ».
Cela a créé un sélecteur composé, avec la marge inférieure.
C'est sur cette feuille CSS que le site web sera basé, et le plus appréciable, c'est que celle-ci a été automatiquement compilée et générée à partir de la feuille SCSS.
Pour obtenir ce résultat, nous avons reproduit la structure du code HTML avec les éléments « li » à l'intérieur des éléments « ul », imbriqués dans la classe « .site-nav ».
Parfait !
Passons au dernier point en revenant à la feuille SCSS.
Mettons en forme les balises « a », qui définissent la cible des liens du menu.
Je veux appliquer le style aux balises « a » imbriquées dans les éléments « li » placés dans une liste « ul » qui dépend de la classe « .site-nav ».
Je vais donc l'insérer à l'intérieur de cet élément « li », avant l'accolade fermante, en ajoutant la lettre « a », suivie d'une paire d'accolades.
Nous allons définir plusieurs propriétés, en commençant par la taille de police « font-size », avec une valeur de « 1.15em ».
Poursuivons avec la propriété « text-decoration », dont la valeur est « none » afin de supprimer le soulignement activé par défaut.
La propriété « letter-spacing », avec un espacement de « 0.15em », puis la propriété « text-transformation » afin d'afficher les lettres du texte en majuscules.
Appliquons également une jolie couleur à l’aide des propriétés « transition: » et « color », avec une durée de transition de « .3s ».
Comme il s'agit d'une nouvelle propriété très sophistiquée, nous ajouterons aussi une version WebKit en plaçant le curseur sur cette ligne et en appuyant sur Commande + D, ou Ctrl + D sur PC.
J'ajoute le préfixe pour navigateur « -webkit- », et j'enregistre.
Notez au passage que nous avons désormais quatre niveaux d'imbrication.
La balise « a » est dans l'élément « li », qui est dans la liste « ul », elle-même dans la classe « .site-nav ».
Je vous déconseille d'aller au-delà de 4 niveaux d'imbrication, car cela peut avoir un impact sur la lisibilité du code, mais aussi sur la vitesse du site.
Vérifions le résultat dans le navigateur.
Il n'y a plus de soulignement, les liens sont en majuscules et l'interlignage a été ajusté.
Reste à s'occuper de la couleur du texte, que je souhaite afficher en blanc.
Basculons dans Dreamweaver pour ajouter la propriété « color », qui agit sur la couleur du texte.
Je pourrais taper le mot « white », mais je préfère utiliser la propriété super pratique que nous avons utilisée précédemment.
Au lieu de saisir la couleur, il faut donc taper — vous vous rappelez son nom, en haut ?
« $primary-color ».
Je tape donc « $primary-color », puis un point-virgule, j'enregistre et vérifie dans le navigateur.
Hé, parfait !
Les liens sont blancs !
Si vous souhaitez maintenant changer globalement la couleur, revenez dans Dreamweaver, et modifiez la valeur de la variable.
Essayons le rouge, qui sera superbe !
Bon, ce n'est peut-être pas aussi superbe que cela...
Mais cela illustre bien la facilité du processus consistant à changer une seule variable pour répercuter la modification sur la totalité du code CSS.
À la bonne heure !
Je vais rétablir le blanc initial, comme par magie !
Il reste à aborder un dernier avantage des préprocesseurs, et pas des moindres, que l'on appelle les « mixins ».
Voyons de quoi il s'agit.
Qu'est-ce qu'un mixin ?
Un mixin permet de regrouper plusieurs propriétés CSS pour faciliter leur manipulation.
Un mixin est particulièrement utile lorsque vous devez répéter de longues listes de propriétés CSS.
Cela vous évite d'avoir à les ressaisir plusieurs fois : associez-les dans un mixin de simple syntaxe, que vous utiliserez en lieu et place de la liste.
L'utilisation des dégradés CSS illustre parfaitement le fonctionnement des mixins.
Prenons l'exemple de ce site.
Faisons défiler la fenêtre pour observer les différents dégradés.
Ici à droite, la description de l'illustration est affichée sur un beau dégradé en arrière-plan.
Descendons encore un peu.
Voici un autre dégradé, derrière cette illustration.
Enfin, on trouve un dernier dégradé dans le pied de page.
Ce site contient donc pas mal de dégradés.
Observons maintenant le code CSS sous-jacent.
Pour cela, revenons dans Dreamweaver.
Voici le code de la version définitive du site.
Ceci est la page HTML, passons à la feuille CSS.
En haut du document, voici la classe qui décrit le premier dégradé du site.
Comme vous le constatez, la description d'un dégradé en CSS requiert de nombreuses informations : vous devez préciser qu'il s'agit d'une image d'arrière-plan, que le dégradé est linéaire, défini par un angle exprimé en degrés, avec une couleur de début et une couleur de fin.
Tous ces paramètres définissent le dégradé.
Le hic, c'est que cette propriété CSS est relativement récente, et qu'elle n'est pas interprétée de la même façon par les différents navigateurs.
Il faut donc décrire le dégradé pour chaque navigateur, dont voici les principaux.
Le préfixe « -moz- » correspond à Firefox, avec la description à la suite.
Il y a aussi une description pour les navigateurs WebKit, dont le plus courant est Chrome, ainsi qu'une description « -ms- » pour les navigateurs Microsoft.
Cela entraîne pas mal de répétitions, et le code est relativement long.
En plus, on retrouve d'autres descriptions plus bas pour créer le deuxième dégradé du site.
Idem plus bas, pour le pied de page.
Vous voyez que les préfixes de navigateur « -moz- », « -webkit- » et « -ms- » apparaissent à plusieurs reprises dans le code.
C'est un exemple parfait pour étudier l'utilisation des mixins.
Je vais tout simplement supprimer les descriptions de chaque dégradé, en commençant par celui du pied de page.
Mais avant de supprimer le code, n'oubliez pas de noter le nom du pied de page, vous en aurez besoin par la suite.
Retenez donc le nom « footer ».
Je supprime ce dégradé.
Passons au suivant.
Le voici.
Le nom de ce dégradé est « .artwork-3 », suivi de « .artwork-piece ».
Mémorisez ces noms pour la suite, nous les utiliserons dans notre mixin.
Voici le dernier.
Il s'intitule « .artwork-1 », suivi de « .artwork-description ».
Voilà, j'ai supprimé les dégradés.
Jetons un œil au site.
À la place du dégradé, on a maintenant un cadre blanc.
Un peu plus bas, on avait un dégradé sur le côté, et le dégradé du pied de page a disparu lui aussi.
Voyons comment les rétablir à l'aide d'un mixin.
Pour cela, il faut ouvrir le fichier SCSS, puis se placer à la fin du document et saisir un symbole « @ », suivi de « mixin », et de la touche Espace.
Ensuite, spécifiez le nom du mixin.
Le choix du nom est libre, j'appellerai le mien « gradient ».
J'ajoute des accolades, je colle les propriétés CSS et j'insère une tabulation.
Il s'agit des propriétés que nous venons de supprimer de la feuille CSS, et nous allons les utiliser ici.
On a donc créé un mixin, on lui a donné un nom, puis on a inséré ce long bout de code CSS qui contient les paramètres du dégradé.
Voyons maintenant comment utiliser ce mixin.
Pour cela, ajoutons les noms de classe que nous avons notés tout à l'heure en supprimant les descriptions des dégradés.
Le premier cadre s'intitulait « .artwork-1 », « .artwork-description ».
Et j'ajoute des accolades.
Et si au lieu d'écrire le code interminable du dégradé, nous pouvions simplement insérer notre mixin ?
Regardez.
Tapez « @include », puis ajoutez tout simplement ce nom.
Dreamweaver génère la nouvelle feuille CSS, jetons-y un œil en cliquant sur la page HTML.
L'onglet Source Code s'affiche.
Passons à l'onglet « scss-styles.css », c'est-à-dire à la page qui est créée.
Et voilà !
Le code généré apparaît ici, et l'instruction « @include » a été remplacée par la propriété « background-image ».
Génial !
Voyons ce que cela donne dans le navigateur.
Juste ici...
Un dégradé a remplacé l'arrière-plan blanc de ce cadre.
Utilisons à nouveau le mixin pour mettre en avant les avantages de cette méthode.
Revenons à notre feuille SCSS dans Dreamweaver.
Nous avions noté le nom du cadre suivant dont nous avions supprimé le dégradé.
Il s'intitulait « .artwork-3 .artwork-piece ».
J'ajoute des accolades, et je procède de la même manière : plutôt que d'écrire tout le code, je tape « @include », suivi de « gradient ».
Le code CSS est généré ; passons dans le navigateur pour voir le résultat.
Je fais défiler la page.
Voici le premier.
Et le second.
Parfait !
Vous devez commencer à entrevoir toute l'utilité des mixins.
Vous pouvez récupérer de longs morceaux de code et les grouper dans un mixin, que vous pouvez ensuite appeler à l'aide d'instructions « include » d'un bout à l'autre de la feuille SCSS.
Cette mise en œuvre présente tout de même un inconvénient : les couleurs sont les mêmes sur les deux dégradés, alors qu'elles étaient différentes dans la version originale.
Pour résoudre ce problème, nous allons ajouter une variable.
Nous avons parlé des variables tout à l'heure, voyons comment les utiliser avec un mixin pour obtenir deux dégradés différents.
Retournons dans Dreamweaver.
Actuellement, les couleurs sont codées en dur sur ces lignes et sont assignées à ce mixin, qui est appelé dans le code.
J'aimerais remplacer ces couleurs par une variable.
Je pourrai ainsi ajuster les couleurs de chaque dégradé.
Voici comment procéder.
Je vais créer deux variables, en insérant leur définition à l'intérieur du mixin, juste après le mot « gradient ».
J'ajoute des parenthèses, puis comme tout à l'heure, je tape le symbole dollar de la variable, et je l'appelle « $gradient-color1 ».
Elle représentera la première couleur de ce dégradé.
Un dégradé étant une transition progressive d'une couleur vers une autre, nous devons donc définir la couleur de fin.
Pour ce faire, saisissez une virgule, puis le nom « $gradient-color2 ».
Parfait !
Voyons maintenant comment utiliser ces variables.
Je sélectionne cette couleur, définie par le code « rgb » et ses composantes, je la supprime, j'insère des parenthèses, puis ma variable.
Idem pour la seconde couleur.
J'efface tout ceci, j'ajoute des parenthèses, puis la variable « gradient 2 ».
Comme la définition du dégradé doit être répétée pour les différents navigateurs, nous n'avons plus qu'à copier les variables.
Fini le code « rvb » en dur.
Même chose pour la seconde couleur... tout cela appartient au passé.
Nous devons maintenant définir ces couleurs.
Cela s'effectue ici, à l'aide de l'instruction « @include », à laquelle nous allons ajouter la variable.
Il s'agit en l'occurrence de cette couleur, j'ajoute donc des parenthèses, puis le code RVB du rose, la première couleur.
J'ajoute une virgule, puis la seconde couleur, une teinte pêche.
L'instruction « @include » appelle donc le mixin « gradient », qui correspond à tout ce code.
Les seules variables sur lesquelles nous pouvons agir sont ces couleurs, intitulées « color1 » et « color2 ».
Et vous pouvez le voir ici, voici la valeur RVB assignée à la variable « color1 », et la valeur de la variable « color2 ».
Vérifions dans le navigateur.
Catastrophe !
Rassurez-vous, on va vite corriger le problème dans Dreamweaver.
L'explication, c'est que nous avons complété la première instruction « @include » pour « .artwork-1 », mais pas celle du cadre « .artwork-3 », ce que nous allons faire maintenant.
Des parenthèses, la couleur de départ, en l'occurrence un violet, une virgule, puis la couleur RVB finale.
Vérifions dans le navigateur en faisant défiler la page.
Voici le premier dégradé, qui va du rose à la couleur pêche, et le dernier dégradé qui, lui, va du bleu au violet.
Vive les mixins !
Terminons par le dégradé du pied de page.
Cette zone est définie par la balise HTML prédéfinie « footer », il n'est donc pas nécessaire de commencer par un point.
Des accolades, à l'intérieur desquelles je vais coller la même ligne, et utiliser ces deux codes RVB pour le dégradé.
Vérifions dans le navigateur.
Regardez...
Voici le premier dégradé, le suivant, et enfin, le dégradé de bas de page.
Nous venons de voir certains avantages des mixins, que l'ajout de variables permet de mieux maîtriser.
Voilà pour les préprocesseurs CSS.
Nous avons étudié trois de leurs fonctionnalités les plus performantes, dont les variables, comme celle-ci, très simple, en haut.
C'est sans aucun doute ce que j'utilise le plus.
Puis nous avons parlé de l'imbrication, qui permet de placer des classes à l'intérieur d'autres classes.
Et nous avons terminé par les mixins, qui permettent de concentrer ces longs morceaux de code sur une seule ligne.
Tout cela est absolument impossible à faire en CSS standard.
Mais Dreamweaver compile le code, puis l'insère dans le code CSS standard que voici.
Ce code a été généré automatiquement.
Les valeurs des variables sont insérées, et tous les sélecteurs composés sont créés à partir de l'imbrication que nous avons conçue dans le préprocesseur.
Enfin, en bas, cette longue partie de code est injectée dans ces classes, à partir d'une seule ligne de code écrite dans le fichier SCSS.
Je suis très reconnaissant à Dreamweaver pour avoir supprimé les lignes de commande et les étapes de compilation et de configuration qui me laissaient plutôt perplexe.
Tout cela est caché maintenant, et c'est bien plus facile ainsi.
Nous en avons terminé avec les préprocesseurs CSS.
Et c'est une bonne nouvelle, car j'ai beaucoup de mal à prononcer ce groupe de mots !
