Découvrir LESS

Imbriquer les règles de style

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
LESS vous permet d'imbriquer des règles de style les unes dans les autres. Il s'agit d'accélérer et de faciliter votre développement. Ainsi, voyez comment imbriquer les règles LESS.

Transcription

Poursuivons si vous le voulez bien, notre étude des principes fondamentaux de less, et dans cette vidéo je vais vous montrer comment écrire des règles de style à la façon less. Alors, je vais partir d'un autre exemple, vous voyez que c'est un autre fichier html tout aussi simple d'ailleurs, donc j'ai ici une balise div qui s'appelle wrapper et à l'intérieur de laquelle je définis tout simplement une zone de navigation. Donc j'utilise la nouvelle balise nav de l'HTML5, à l'intérieur de laquelle vous voyez, je définis une liste de liens grâce aux balises ul, li et a qui sont imbriquées les unes dans les autres. Ceci est le code html tout à fait classique et normal d'une barre de liens. Alors au niveau de mon fichier less, eh bien regardez, j'ai déjà commencé à l'écrire. Donc j'ai deux variables qui s'appellent linkBkg, c'est le background des liens, donc la couleur de fond que je vais utiliser pour ma barre de liens, vous voyez que c'est un bleu et ici j'ai une deuxième variable qui s'appelle linkColor, alors ça c'est un vert, et ce sera la couleur du texte des liens donc, une troisième variable qui est la dimension du site et puis une première règle de style pour l'élément wrapper qui donne sa largeur au site et qui le centre dans la fenêtre. Alors ça donne ceci au niveau du navigateur, c'est tout simplement une liste de liens. Alors je vais revenir au niveau de ma feuille less, et je vais créer ici un deuxième style pour mon élément nav. Alors je vais tout simplement commencer par lui mettre une background-color qui sera égale à la valeur de ma variable linkBkg, je sauvegarde, voici ce qui est généré dans le fichier css, donc rien de bien compliqué, et au niveau de mon navigateur, j'ai tout simplement mis ici une couleur de fond à mes liens. Alors maintenant je vais retirer les petits points qui sont ici devant les liens et je vais également remettre les marges et les paddings à zéro pour que le mot Lien commence ici au début de la zone. Alors pour ça, je vais revenir dans mon fichier less, voilà, et je vais créer un style pour nav ul comme ceci, et je vais lui dire padding égal 0, voilà, margin égal 0 également, et je vais également lui dire list-style-type égal none, ça, ça va retirer les petits points devant chaque élément, je sauvegarde, voici ce qui est généré dans le css, et au niveau de mon navigateur effectivement, j'ai retiré les petits points ainsi que les espacements. Alors si je retourne au niveau de ma feuille de style less, eh bien, vous voyez que je dois en fait chaque fois répéter ici un élément, et ça, quand on travaille avec less, on n'aime pas trop répéter, donc une autre façon de faire la même chose, eh bien regardez bien, je vais prendre mon style ul ici et je vais ici le déplacer à l'intérieur de mon style nav comme ceci. On va faire un petit peu de ménage pour bien voir ce qui se passe, voilà. Vous voyez donc que je peux ici imbriquer les styles les uns dans les autres. Quand je sauvegarde, eh bien, regardez ce qui est généré, c'est exactement la même chose, et au niveau de mon navigateur, eh bien ça ne change absolument rien du tout. Eh bien, maintenant que l'on peut imbriquer comme ça des styles les uns dans les autres au niveau de less, on ne va pas s'arrêter en si bon chemin puisque j'ai également une balise li qui se trouve imbriquée au niveau du code html dans la balise ul, donc je vais également l'imbriquer ici, dans mon code less et je vais tout simplement lui dire ici display égal inline-block, ça, ça va permettre, quand je sauvegarde, donc regardez, de générer une nouvelle version de ma feuille de style avec un style supplémentaire ici, et puis, au niveau du navigateur, voilà, de mettre les éléments les uns à côte des autres plutôt que les uns en dessous des autres, et puis je continue, donc dans ma feuille less, je vais créer ici à l'intérieur de mon élément li un style pour mes liens, donc pour ma balise a comme ceci, voilà, c'est là que tout va se passer en fait. Je vais définir la couleur de mes liens, je vais la rendre égale à la valeur de ma variable link-color, je vais également demander à ce qu'ils s'affichent comme des blocs, ce qui va me permettre de leur donner un petit padding, mettons de 10 pixels. Voilà, je vais également changer la taille avec font-size, je vais mettre 1.4em, j'aurais même pu éventuellement faire une variable pour cette font-size ; ici je ne l'ai pas fait, et puis, texte-decoration, voilà : none, ça, c'est pour retirer le soulignement des liens. Donc voilà, je sauvegarde ceci, regardez ce qui est généré dans le css : un style supplémentaire pour le a donc et au niveau de mon navigateur, eh bien voici ma barre de lien qui commence tout doucement à prendre forme. Alors j'aimerais également générer un effet de roll-over, c'est-à-dire qu'au niveau de mon styles.less toujours à l'intérieur de a, eh bien, je vais continuer mon petit bonhomme de chemin, donc je vais mettre :hover, comme ceci, voilà, pseudo-classe donc, et je vais remettre en place le soulignement, donc text-decoration : underline mais uniquement quand je passe ma souris sur le lien. Alors je sauvegarde, je vais voir ce qui se passe dans le navigateur, je rafraichis ma page et bah regardez, ça ne marche pas des masses, donc qu'est-ce qui se passe ? Au niveau de ma feuille de style css, regardez ce qui s'est passé, j'ai bien généré un nouveau style mais j'ai ici un espace entre mon a et mon :hover, alors, c'est cette espace ici qui m'embête, regardez, si je le supprime ici dans ma feuille de style css, que je reviens dans mon navigateur, eh bien là, ça fonctionne, oui mais rappelez-vous que nous n'allons jamais modifier comme ça directement le css parce que si je fais une petite modification ici à mon fichier less et que je le re-sauvegarde, eh bien ça va recompiler, regardez, j'ai perdu ici ma modification. Donc au niveau du fichier less, eh bien j'ai rajouté ici un petit symbole, c'est le & qui est ici, je sauvegarde. Regardez maintenant, quand je génère le fichier, eh bien, je n'ai plus l'espace entre le a et le :hover, et c'est donc comme ça que je peux imbriquer des pseudo-classes au niveau du fichier less. Remarquez également que je peux, par exemple, faire ici « , » et :visited, par exemple. On pourra avoir également l'autre pseudo-classe, je sauvegarde et regardez ce qui est généré : j'ai un style avec nav ul li a:hover, vous avez remarqué qu'il n'y a pas d'espace entre le a et le deux points, , nav ul li a:visited, de nouveau sans espace puisque j'ai mis ici le petit & commercial. Alors, j'ai pas besoin de ça, c'était juste pour la démonstration. Donc voilà comment ça fonctionne. Alors, remarquez également que j'ai maintenant pleins d'accolades ici, qui se ferment, alors là ça va devenir un petit peu problématique si vous ne vous aidez pas, et donc n'hésitez surtout pas, quand vous écrivez ces choses-là, à commenter votre code, donc ici, c'est la fin de la pseudo-classe hover, ici c'est la fin de a, ici, et regardez comment Brackets vous aide également, puisqu'il va mettre en surbrillance les paires de parenthèses ou les paires d'accolades ici, donc je vais faire end, alors là c'est le li, ici je suis à la fin de l'ul et puis ici, à la fin de ma feuille de style, donc end nav comme ceci. Alors, ça va vous aider véritablement à vous en sortir ceci, puisque vous voyez que j'ai pleins d'accolades qui se ferment ici d'un coup hein, donc ça c'est quelque chose que vous invite à faire, une bonne pratique que je vous invite à prendre dès le départ. Alors moi j'aime bien cette façon d'écrire du css, je trouve ça beaucoup plus pratique, et puis il y a encore un avantage considérable, c'est que quand je reviens par exemple ici au niveau de ma page html, eh bien, imaginez que plus tard dans cette page, j'ai envie de définir ailleurs une autre barre de navigation. Par exemple dans le pied de page, dans le footer, j'ai envie de mettre une autre barre de navigation mais qui aura une mise en forme différente. Bah c'est très très simple hein, regardez, j'ai donné un nom par exemple ici à cette barre de navigation, je vais l'appeler main pour dire que c'est la barre de navigation principale, et puis au niveau de ma feuille less, eh bien, je n'ai qu'à changer ici le nav en #main ou #main, ça dépend si vous êtes musicien ou pas, je sauvegarde ceci et regardez ce qui est généré, eh bien, j'ai changé en une seule opération, regardez ici, tous mes styles et je peux donc comme ça maintenir ma feuille de style, la mettre à jour de manière tout à fait efficace donc et changer comme ça pleins de styles css en une seule opération. Voici donc une deuxième fonctionnalité qui nous est apportée par less : la possibilité d'imbriquer donc les styles les uns dans les autres comme je l'ai fait ici.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 2016

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 !