Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Sass

Imbriquer les sélecteurs et les propriétés CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez comment Sass permet d'imbriquer vos sélecteurs et vos propriétés CSS. Ainsi, vous pourrez écrire du code plus concis et plus lisible.

Transcription

Dans cette vidéo, nous allons examiner une troisième fonctionnalité propre au langage « Sass ». C'est la possibilité d'écrire votre code « CSS » de manière imbriquée, c'est-à-dire, avec une syntaxe similaire à celle que vous utilisez pour écrire du « JavaScript » ou du « PHP ». Alors, pour vous démontrer tout cela, j'ai toujours la même page « html ». Je lui ai simplement ajouté, ici une barre de liens, avec un petit effet de survol, comme vous le voyez ici. Comment cela se passe-t-il, au niveau du code « html » ? Rien de bien méchant, voici notre nouvelle barre de liens. Donc, c'est un élément « nav », avec dedans, une liste non-ordonnée. Qu'est-ce que j'ai ici ? Une balise « nav », une balise « ul », des balises « li », et des balises « a », pour générer les liens? C'est comme cela que l'on fait des barres de liens en « html », vous connaissez, très certainement, cette technique-là. Alors, au niveau de mon code « Sass », voilà ce que cela donne. J'ai un style pour « nav », j'ai un style pour « nav ul », j'ai un style pour « nav ul li a », j'ai un style pour mon effet de survol qui se trouve ici. Et, au niveau de ma feuille de style « CSS », comment tout cela est-il compilé ? Vous voyez, mon style pour « nav », mon style pour « nav ul », etc. Bref, tout cela est connu et cela marche très bien. Maintenant, au niveau de « Sass », j'ai une autre façon d'écrire la même chose. Ici, plutôt que de créer un style pour « nav » et puis, un autre style complètement différent pour « nav ul ». Vous voyez que, chaque fois, je dois répéter les sélecteurs qui précèdent. Je vais pouvoir, en « Sass », écrire le style pour « ul » à l'intérieur du style pour « nav ». Comme ceci. Donc, je vais prendre, ici, les propriétés « CSS » que j'ai définies. Je vais les couper avec « Ctrl x » ou « commande x » et les coller avec « Ctrl v » ou « commande v ». Voilà ce que cela donne. Donc, le style pour « ul » est à l'intérieur du style pour « nav » Je n'ai plus besoin de ce style pour « ul », ici. Je peux le supprimer. Quand je sauvegarde, vous voyez que je n'ai pas d'erreurs, cela compile correctement, et regardez, au niveau de la feuille de style « CSS », j'ai généré un premier style, ici, pour « nav » avec son accolade qui se ferme, ici. Et puis, un second style « nav ul », avec également, son accolade qui se ferme. Remarquez que le style pour « nav ul » est un petit peu indenté, ici, dans la feuille de style « CSS » pour bien que l'on se rappelle que ce style « ul » faisait partie dans le fichier source, donc, dans le fichier « Sass » du style pour « nav », comme ceci. Je peux continuer, je ne vais pas m'arrêter en si bon chemin. Dans l'« ul », j'ai un « li », dans mon code « html » et dans le « li », j'ai une balise « a » dans mon code « html ». Donc, au niveau de la balise « a », je vais pouvoir mettre toutes ces propriétés « CSS ». Je les déplace au niveau de la balise « a » On va faire un petit peu de ménage pour bien lire ce que l'on a. Donc, je n'ai plus besoin du style « nav ul li a », et regardez, quand je sauvegarde, j'ai généré un style pour « nav » qui se termine ici. Un style pour « nav ul » qui se termine en ligne 33, par l'accolade qui se ferme. Et puis, un troisième style pour « nav ul li a », vous le voyez, pour les liens qui se trouvent à l'intérieur de cette barre de liens. Alors, faites attention ici, j'ai plusieurs accolades qui se ferment, je ne sais plus trop à quoi cela correspond, c'est l'inconvénient de cette technique, donc, n'hésitez surtout pas à commenter votre code « Sass ». Ici, c'est la fin de la balise « nav », ici, j'ai la fin du style pour « ul ». Ici, « bracket », vous vous demandez quelle accolade est la fin ou le début de quoi. Ici, je vois très bien que c'est la fin de « li », et ici, c'est dans un commentaire, la fin de « a », voilà, comme ceci. Maintenant, pour mon effet de « Roll hover », donc, je continue, dans le style pour « a », j'ai « :hover », et puis, je vais mettre cette propriété là-dedans. Je n'ai plus besoin de ce style « nav ul li a:hover ». Alors, si je sauvegarde, maintenant, regardez ce qui a été généré. J'ai généré un style supplémentaire, mais, j'ai « nav ul li a :hover ». Et cela ne va pas. Cela n'est pas bon. Vous savez que dans « CSS », je n'ai pas besoin de cet espace. Oui, mais voilà, je viens de modifier ma feuille de style « CSS », donc, la prochaine fois que j'apporte une modification à mon fichier « Sass » l'espace sera de retour, ici, et ce n'est pas bon. Donc, j'ai un sélecteur particulier, ici, plutôt que de mettre « :hover », je vais mettre « &:hover » et le « & », en fait, référencer le sélecteur parent, donc le « a » qui se trouve ici. Je sauvegarde et, regardez, maintenant je n'ai plus d'espace, « a:hover », c'est comme cela que je veux que ma feuille de style soit écrite. Donc, vous voyez que c'est une tout autre syntaxe au niveau du code « sass ». Par contre, au niveau du « CSS », cela ne change rien du tout. Bien évidemment, au niveau de ma page web, tout fonctionne toujours correctement, c'est simplement pour le confort du développeur c'est comme cela que l'on écrit du « JavaScript » ou du « PHP ». Ici, j'ai imbriqué des sélecteurs « CSS ». Vous voyez que cela fonctionne très bien. Mais « Sass » va un peu plus loin, parce que vous voyez, ici, que dans mon style pour « a », alors, je vais redimensionner ceci pour que vous puissiez bien le voir, j'ai trois propriétés, qui sont trois propriétés qui commencent par « font ». J'ai « font-size », « font-family » et « font-weight ». Pour cela, je peux également utiliser la même technique pour imbriquer, non plus des sélecteurs « CSS », mais maintenant, des propriétés « CSS ». Donc, je vais créer un bloc que je vais appeler « font », comme ceci, ce n'est pas « = », mais c'est « : » dont j'ai besoin. Et, dans ce bloc « font: », je vais dire « size: » et je vais reprendre, ici, la valeur de cette variable, voilà. Ensuite, toujours dans ce bloc « font: », j'ai besoin de « family: », comme ceci, et je vais aller rechercher cette variable-ci. Je vais aller rechercher mon « bold; », ce qui fait que je n'ai plus besoin de ces lignes de code. N'oubliez pas, quand vous faites ce genre de choses, de commenter votre code, pour bien vous rappeler de ce que vous fermez. Vous voyez que quand je fais cela, je sauvegarde et cela compile tout-à-fait correctement. C'est une syntaxe que me permet « Sass ». Cela compile, comme ceci, vous le voyez dans le code « CSS », c'est du « CSS » tout-à-fait classique. Cela ne change rien au niveau de mon navigateur, tout fonctionne correctement. Mais, vous avez ici, au niveau du « Sass » une syntaxe imbriquée, qui correspond à celles que vous utilisez, probablement déjà, dans d'autres langages, tels que « PHP », « JavaScript » ou « Java », tout court, par exemple Donc, voilà une troisième possibilité que « Sass » nous offre, ici, pour écrire nos feuilles de style « CSS ».

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 !