Découvrir LESS

Utiliser les opérateurs

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez apprendre à utiliser des opérateurs mathématiques dans votre code LESS.

Transcription

Poursuivons, si vous le voulez bien, notre étude des principes fondamentaux de less. Et vous allez apprendre dans cette vidéo, eh bien, que less est capable de calculer. Et ça, c’est très très pratique, vous allez le voir. Alors, pour vous illustrer tout cela, eh bien, j’ai un fichier html qui est un tout petit peu plus long, mais pas tellement plus compliqué. Regardez, j’ai simplement un div qui s’appelle wrapper, qui encadre l’ensemble de mon contenu. Et mon contenu c’est quoi ? Eh bien, c’est un titre de niveau 1, une zone de navigation avec 4 liens dedans, et puis une section avec un paragraphe de texte. Au niveau du navigateur, ça donne quoi ? Voyez que ce n’est pas très compliqué. J’ai mon titre de niveau 1, ma section avec mes liens ici, et puis mon paragraphe de texte, comme ceci. Alors, au niveau de la feuille de style en less., eh bien, vous voyez que je définis déjà une série de variables, donc quelques couleurs que je vais utiliser dans mes styles, des polices de caractère. Je définis également des tailles pour différents types de caractère, donc la taille de base qui est la taille du texte, donc du paragraphe, la taille des titres et la taille des liens. Je définis également deux variables : la dimension, donc la largeur du site à 960 pixels, et une épaisseur de bordure à 3 pixels. Ensuite, eh bien j’ai mes styles qui sont ici, et vous voyez que j’ai utilisé la notation imbriquée que nous avons vue ensemble dans la vidéo précédente. Ça donne quoi ? Ça donne une feuille de style comme ceci, donc vous voyez, il n’y a rien de particulier à ceci. Alors, si je reviens dans ma feuille less, eh bien regardez au niveau des variables ici, si vous regardez bien, eh bien la taille de mes titres, mon titleSize ici, est exactement deux fois supérieure à mon base-Size. Donc plutôt que d’écrire 2em ici directement, eh bien, je peux faire un petit calcul, c'est-à-dire que je peux faire en sorte que la valeur d’une variable fasse référence à une autre variable comme ceci, et puis je vais faire x 2 tout simplement. Je vais faire la même chose pour linkSize, donc je vais dire que c’est égal à base-Size x 1.3 cette fois-ci. Alors attention : 1.3, et pas 1,3 ici dans less. Quand je sauvegarde ceci, alors, où est-ce que j’utilise ces variables ? Donc base-Size, je l’utilise ici pour mes paragraphes. Voilà, ici la variable base-Size. TitleSize, je l’utilise pour mon élément de niveau 1, le voici : titleSize. Et puis linkSize, eh bien, je l'utilise pour la balise a, dans ma zone de navigation. Voici le linkSize. Alors, ça donne quoi dans ma feuille de style css ? Eh bien, vous voyez ici pour mon paragraphe 1em, pour mon h1 : 2em, c’est 1 fois 2, et puis pour mon lien ici : 1.3em, eh bien c’est 1 fois 1.3. Le gros avantage de fonctionner comme ceci, c’est que si maintenant je désire changer la taille de base, et mettre ici par exemple 0.9em plutôt que 1em, je sauvegarde, je recompile donc. Et regardez ce que ça donne au niveau de ma feuille de style, eh bien mon paragraphe est maintenant bien à 0.9, mais regardez, mon titre de niveau 1 est à 1.8, c’est 0.9 fois 2, et puis mon a, il est à 1.17, c’est 0.9 fois 1,3. Et donc vous voyez ici que grâce à ces petites opérations mathématiques, eh bien je peux très facilement changer comme ça la taille de tous mes caractères dans ma feuille de style. Alors, si ça marche avec des multiplications, ça marche aussi avec des additions, des soustractions et des divisions. Prenons par exemple l’épaisseur des bordures qui est ici. Donc vous voyez que c’est égal à 3 pixels, et j’utilise cette variable ici, au niveau de ma zone de navigation, border, voilà ici, la variable baseBorder qui est utilisée. Alors, regardez ce que ça donne pour le moment au niveau de mon navigateur. Vous voyez que j’ai une bordure ici, autour de ma zone de navigation. Alors, je peux additionner, je peux dire par exemple : 3 pixels, bah mettons +2 par exemple. Ça fera 5 pixels. Alors, mettons bien les espaces comme il faut. Je sauvegarde. Dans ma feuille de style css, regardez ce que ça donne au niveau du nav. Voilà elle est ici, ça donne bien 5 pixels. Et donc dans mon navigateur, quand je rafraichis ma page, j’ai une bordure, vous le voyez, un petit peu plus épaisse. Alors, petite parenthèse au niveau des unités de mesure. Vous voyez que j’ai dit 3 pixels + 2. Je n’ai pas dû dire plus 2 pixels. Donc ici : 3px. Comme j’ai un p et un x, on pourrait considérer que c’est une chaîne de caractère. Seulement less est suffisamment malin pour comprendre qu’il doit faire 3 plus 2, ça fait 5, et puis rajouter l’unité de mesure px au résultat de cette opération. Donc pas de problème ici à additionner ou à multiplier d’ailleurs des pixels avec des nombres. Ça marche tout à fait convenablement. Alors, les règles classiques sont d’application. Prenons par exemple 3 pixels plus 2, mettons fois 4. Alors, est-ce que ça va faire 3 plus 2, 5 fois 4, 20, ou 2 fois 4, 8 plus 3, 11 ? Eh bien, je sauvegarde. Je vais voir dans styles.css, et ça fait bien 11 pixels, pourquoi ? Parce que comme dans les autres langages, eh bien la multiplication est prioritaire sur l’addition, sauf si vous utilisez les parenthèses comme ceci. Je sauvegarde, et là maintenant regardez ce qui se passe. Ça fait bien 20, c'est-à-dire que j’ai fait 3 plus 2, 5 et puis après que j’ai multiplié, fois 4, puisque maintenant grâce aux parenthèses, c’est l’addition qui est devenue prioritaire. Donc tout ça fonctionne comme dans d’autres langages. Alors, faites attention à une petite chose : pas mettre 20 pixels ici, c’est beaucoup trop pour mes bordures, je vais revenir à 3. Le symbole « - », il est utilisé pour deux chose en less. Je peux l’utiliser par exemple, pour définir ici le nom de mes variables. Donc si je fais base-Size avec ici un tiret, eh bien, voilà ce que ça va donner, donc je vais changer ceci, je vais également modifier ça, là-bas où j’utilise base-Size. Et donc ça fonctionne très bien. Quand je sauvegarde vous voyez que j'ai pas d’erreurs, ça compile comme il faut. Maintenant si je veux faire ici base-Size-2, et que j’oublie de mettre des espaces, eh bien regardez, là par contre j’ai une erreur. On me dit que la variable base-Size-2 is undefined, tout simplement parce que ceci, ce n’est pas le symbole mathématique « - », mais c’est un tiret. Mais ceci, j’ai envie de le considérer comme le symbole mathématique « - ». Donc ça c’est une petite confusion qu’il faudra regarder dans less. Il faudra bien faire attention à ça. Moi j’ai deux conseils à vous donner à ce niveau-là : le premier d’entre eux, eh bien, c’est de ne pas utiliser les tirets quand vous définissez des noms de variables, et voilà une raison supplémentaire pour laquelle j’aime bien donc ce camel case, cette casse en chameau. Je vais également, voilà, modifier ça ici plus bas. Et puis quand vous utilisez des opérateurs mathématiques, eh bien veillez toujours à mettre des espaces autour de votre opérateur mathématique. Ça évitera toute confusion. Donc voilà qui est dit. Et voilà un autre outil à votre disposition dans less, une autre fonctionnalité que less vient apporter au css. La possibilité de faire des opérations mathématiques, des moins, des fois, des plus, et des divisés, et ça fonctionne grosso modo comme dans les autres langages, avec les priorités mathématiques habituelles.

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 !