Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Sass

Utiliser la directive @extend

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le premier mécanisme de réutilisation du code proposé par Sass est la possibilité d'étendre une classe CSS par une autre. Initiez-vous à ce mécanisme et à ses particularités.

Transcription

Dans le chapitre précédent, vous avez appris quelques constructions de base du langage SASS comme les variables, les opérateurs, les fonctions, les partielles. Dans ce chapitre, nous allons monter en puissance et parcourir ensemble quelques fonctionnalités de SASS, vous permettant de réutiliser un blog de code. Alors le fait de réutiliser du code va non seulement accélérer votre développement, puisque vous ne devrez pas écrire plusieurs fois la même chose, ça va également faciliter la maintenance de votre application, puisque si vous modifiez le blog de code partagé, vous modifiez aussi toute les fois où vous utilisez ce blog de code. Ça va également améliorer la fiabilité de votre application, puisque le blog de code partagé, vous le testerez et débegguerez une seule fois et vous savez que vous pouvez l'utiliser le cœur tranquille. C'est testé et débuggué. Alors, pour vous illustrer tout cela, j'utilise toujours plus ou moins la même page HTML. Remarquez simplement que je lui ai ajouté quelques icônes ici, dans l'en-tête, j'ai l’icône d'une petite enveloppe, d'un utilisateur et d'une loupe et puis, ici, j'ai également ajouté une petite icône dans la barre de lien. J'ai envie de transformer ces icônes en boutons, en boutons sur lesquels je peux cliquer. Alors, allons voir d'abord dans le code HTML, comment ça se passe. Au niveau du code HTML, dans l'en-tête j'ai rajouté ici, un élément « ul », un élément « ul » qui a la classe « buttonGroup » , vous le voyez. Et donc, chacun de ces boutons, c'est, en fait, un élément « a », un lien, et dans cet élément « a », j'ai chaque fois été recherché une icône de « font-awesome », la petite enveloppe de l'utilisateur et [inaudible] pour la petite loupe. Alors, au niveau de la barre de lien, maintenant, là, je n'ai plus un « ul », mais un paragraphe avec la classe « button ». Voyez, la différence ici,« buttonGroup » pour l'« ul » et « button » pour le boutton qui est tout seul. Et puis de nouveau, pour le bouton lui-même, j'utilise en fait le même élément, donc, le « a » , le lien avec une icône « font-awesome » dedans ici, les barres. Alors, au niveau de la mise en forme de tout cela, dans mon mon application SASS, j'ai été créer ce fichier « button.scss », ce fichier, bien évidemment, dans le fichier principal. Et voilà, je l'importe ici. Donc, voilà mon fichier « button.scss » et vous voyez que j'ai créé ici une première classe que j'ai appelée « .btn » avec toute l'apparence que j'ai envie de donner à mes boutons. Et vous constatez dans la feuille de styles compilés que j'ai bien ici, deux styles qui sont générés : « .btn » et « .btn: hover». J'utilise ici donc, le fait que je peux imbriquer des styles les uns dans les autres. La classe « btn », je ne l'utilise pas en tant que telle. Concentrons-nous d'abord sur la barre de lien, si vous voulez. Alors, au niveau de la barre de lien, regardez « set » un paragraphe. J'utilise ici la classe « button » tout court, pas la classe « btn ». Donc, je vais revenir dans mon fichier « buttons » ici, « .css » et je vais créer un nouveau style pour « .button a ». Donc, je m'adresse à tous les liens qui se trouvent dans un élément qui a la classe « button ». Tous ces liens, j'ai envie qu'ils héritent de tout ce que j'ai défini ici, pour la classe « btn ». Et c'est là qu'intervient la directive « extend » qui est la première façon de réutiliser du code. Donc, je vais étendre ici la classe « btn » que j'ai définie plus haut. Quand je sauvegarde, regardez ce qui se passe au niveau de la feuille de style compilée. J'ai tout simplement rajouté ici un sélecteur, ainsi qu'un sélecteur pour ce deuxième style qui crée donc l'effet de « hover ». Alors, ça donne quoi au niveau de ma page HTML ? Mais regardez, ça me donne un superbe bouton avec l'effet de « hover ». J'ai simplement envie de lui rajouter des coins arrondis à ce bouton. Allons-y gaiement, je n'ai qu'à faire ici, un petit « border-radius », alors, on va mettre 5 pixels, on va voir ce que ça donne, voilà qui est fait. Et voici un premier superbe petit bouton qui se trouve ici, dans ma barre de lien. Maintenant, pour mon groupe de bouton, ça va être à peu près la même chose, sauf que mes coins arrrondis, je ne les veux que sur le bord gauche du premier bouton et le bord droit du dernier bouton. Alors, on va aller voir dans HTML comment ça se passe ? Rappelez-vous, au niveau de HTML, j'ai ici, un « ul », avec la classe « buttonGroup », cette fois-ci et non plus « button » tout court. Donc, je vais revenir dans « buttons.scss » et je vais créer cette classe « buttonGroup », voilà. Alors, ici, vous allez voir que je vais avoir besoin de faire quelque chose pour « buttonGroup », donc, je vais déjà créer « buttonGroup » comme ceci et puis, je vais mettre le « a » imbriqué dedans puisque ça me permet de le faire, voilà, on va en profiter pour mettre les petits commentaires habituels. Prenez le temps de mettre ces commentaires, c'est très important. Et donc, ici, pour ce « a », qu'est-ce que je vais faire ? Je vais également étendre « extend » comme ceci. La même classe « btn » que j'ai définie au-dessus, je sauvegarde et regardez ce qui se passe. Je vais tout simplement ici, ajouter encore un sélecteur à cette classe et ajouter encore un sélecteur ici, à cet effet de survol. Rien qu'en faisant ça, regardez, ce qui va se passer, j'ai mes trois boutons qui vont se placer correctement. Le petit problème que j'ai ici, c'est que j'ai maintenant des espaces entre mes boutons, ça, je n'ai pas envie. Pour ce qui est de l'élément « buttonGroup », je vais mettre ici, mon « font size » à zéro, ça va solutionner mon problème d'espaces, voilà, qui est fait. Maintenant, il ne me reste plus qu'à mettre mes coins arrondis au coin gauche, ici, du premier bouton et au coin droit du dernier bouton. Pour ça, je vais de nouveau utiliser les styles imbriqués, j'ai besoin ici « li:first-child », je m'adresse au premier de ces « li » et plus précisément au « a » qu'il y a dedans, et lui, je vais lui donner un « border reduce », mais uniquement au coin gauche, donc, le dernier coin supérieur gauche, j'ai besoin de cinq pixels, supérieur droit, zéro, inférieur droit, zéro, inférieur gauche, cinq pixels, comme ceci et je vais également spécifier « li:last-child » donc, le dernier élément, plus précisément, le lien cadence eli, je vais lui donner un « border reduce ». Le premier coin supérieur gauche, zéro, supérieur droit, cinq, inférieur droit, cinq, inférieur gauche, zéro. Normalement, si je ne me suis pas trompé, j'ai bien un beau groupe de boutons avec mes coins arrondis, ici, uniquement sur les extrémités du premier et du dernier bouton. Dernière petite chose : vous voyez que la classe « btn », en tant que telle, que j'ai définie ici se retrouve dans ma feuille de style compilée. En fait, je n'utilise pas cette classe dans mon code HTML, puisque là, je fais référence à « button » ou « buttonGroup » mais pas à « btn » tout court. En fait, j'utilise simplement cette classe en interne dans SASS, pour venir étendre ici, cette classe dans d'autres styles. J'ai un petit truc, si je n'ai pas envie que ça fasse partie de cette classe « .btn » des fichiers compilés, à la place du point je vais mettre un pourcent, je vais également changé le point en %, à chaque fois que j'étends cette classe et quand je sauvegarde, ça veut simplement dire que la classe « btn » en tant que telle, ne fait plus partie de la feuille de styles compilés, c'est simplement quelque chose que j'utilise ici, en interne, dans mon application SASS, pour qu'elle soit étendue par d'autres styles. Voilà une première technique pour ré-utiliser du code. Évidemment, si je modifie quelque chose dans cette classe, pour s'embêter maintenant, je vais modifier tous les boutons de ma page, peu importe que ce soit dans des « buttons » ou des « buttonGroup », c'est évidemment ça l'intérêt de tout ce système, et voici donc une première technique : la directive « extend », pour ré-utiliser dans SASS, un blog de code.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !