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.

Découvrir LESS

Travailler avec des fonctions natives

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
LESS inclut une série de fonctions vous permettant de manipuler des couleurs. Découvrez quelques-unes de ces fonctions.

Transcription

En plus de pouvoir effectuer des opérations mathématiques simples, comme on l’a découvert dans la vidéo précédente, Eh bien, le langage less vous propose une série de fonction nativement présente dans le langage, donc déjà préprogrammée, et qui sont là pour vous, que vous pouvez utiliser comme ça de manière très simple. Alors, on va en découvrir quelques-unes dans cette vidéo. Et pour ça je vais reprendre un fichier très similaire à celui qu’on a utilisé dans la vidéo précédente. La seule différence, c’est que j’ai ici défini un élément header autour de mon titre de niveau 1. Et donc j’ai amendé, bien sûr, mon fichier styles.less pour donner ici une série de propriétés à ce nouvel élément header. Vous voyez que je lui donne une couleur de fond, et je lui donne un padding de 20 pixels. Alors ça donne quoi au niveau du navigateur ? Eh bien, quand je rafraichis ma page, regardez, voilà ce que ça donne. Donc c’est comme le fichier précédent, à l’exception de cette couleur jaune ici dans le fond du header, et de cet espacement que j’ai autour de mon titre. Alors, je vais revenir au niveau de ma feuille less parce que je n’ai pas envie d’utiliser une couleur ici. J’ai plutôt envie d’utiliser un dégradé. Donc pour ça je dois utiliser la propriété css background-image, et je vais faire un linear-gradient. Pour avoir un dégradé, je dois définir au minimum deux couleurs. Pour la première couleur, ça va être facile puisque je vais reprendre la couleur ici que j’avais choisie pour mon dégradé, avec la variable headerBkg. Voilà, c’est un espèce de jaune. Et pour la deuxième couleur, eh bien, j’ai envie d’avoir une nuance de ce jaune. Alors, pour générer une nuance de ce même jaune, eh bien, je vais me rendre sur le site lesscss.org. Et regardez, ici au-dessus, vous avez un lien qui s’appelle : Function Reference. Alors je vais cliquer là-dessus. Vous allez découvrir que dans less, eh bien, on a pleins de fonctions qui existent. Donc des fonctions String Functions, donc pour manipuler des chaînes de caractère, Math Functions pour des fonctions mathématiques, List Functions pour manipuler des listes. Et puis regardez, j’ai des Color Definition Functions, donc des fonctions qui me permettent de définir des couleurs. Alors on va voir ce qui se passe. Voyez ici que j’ai la possibilité de définir des couleurs en rgb, en rgba. J’ai également la possibilité de faire des opérations sur des couleurs, Color Operation Functions. Alors, quelles opérations est-ce que je peux faire sur des couleurs ? Eh bien regardez, je peux par exemple saturer une couleur. Et pour saturer une couleur, eh bien, j’ai besoin d’envoyer à ma fonction au minimum deux paramètres : le premier c’est la couleur à saturer, et le deuxième s’appelle amount, c'est-à-dire finalement le pourcentage de saturation que je veux appliquer à ma couleur. Et je dois définir ici un amount, un pourcentage entre 0 et 100%. Eh bien on va essayer, tiens. Donc je vais retourner ici dans mon code less, et je vais dire que ma deuxième couleur de mon dégradé, eh bien, ce sera le résultat de la fonction saturate de less, et je vais saturer la couleur headerBkg qui est définie donc plus haut dans les variables, et je vais la saturer, mettons de 80% tiens. Comme ça on verra bien ce qui se passe. Voilà, je sauvegarde. Vous voyez que je n’ai pas d’erreur au niveau de la compilation. Au niveau de ma feuille de style css, eh bien, regardez ce qui s’est passé, j’ai un dégradé linéaire, et on a été ici générer une deuxième couleur. Alors ça donne quoi dans le navigateur ? Je reviens sur ma page, eh bien, vous voyez que dans le fond du dégradé, j’ai un jaune beaucoup plus saturé que dans le dessus du dégradé. Donc ça c’est le résultat de la fonction saturate. Alors j’ai l’inverse évidemment. Si je continue avec mes opérations sur les couleurs, je peux faire un desaturate, c'est-à-dire que je vais diminuer la saturation plutôt que de l’augmenter. Et les paramètres de cette fonction sont les mêmes. Je dois lui envoyer la couleur à désaturer, le pourcentage de désaturation. Vous voyez que j’ai un troisième paramètre qui est la méthode, mais qui est un paramètre optionnel, donc je ne vais pas l’utiliser ici. Allons voir ce que ça donne. Donc je vais mettre, ici dans less, desaturate plutôt que saturate. Je sauvegarde. J’ai donc ici généré une autre couleur. Et ça donne quoi au niveau de mon navigateur ? Eh bien, voilà ça donne que maintenant j’ai désaturé mon jaune plutôt que de le saturer. Vous voyez que c’est beaucoup moins joli du coup. Autre opération que je peux également faire sur les couleurs : lighten pour éclaircir les couleurs, ou darken pour les assombrir. Et de nouveau les paramètres sont les mêmes. Donc la couleur à éclaircir ou assombrir, et par quel degré, par quel pourcentage je veux l’éclaircir ou l’assombrir. On va voir ce que ça donne. Alors je vais prendre par exemple ici darken, pour faire un jaune plus sombre, donc. Je sauvegarde. Vous voyez que j’ai encore généré ici une autre couleur. Alors ce sera du noir ici, parce que le jaune que j’assombris à 80%, eh bien, ça donnera du noir. Donc voilà ce que ça va donner au niveau de mon dégradé. Ce n’est pas très joli. Par contre, si je suis un petit peu plus subtil, je vais mettre par exemple darken à 30%, donc un jaune 30% plus sombre que le jaune que j’ai choisi, eh bien, voilà ce que ça donne. Vous voyez que je peux donc assombrir ici mon jaune de base, et créer comme ça des dégradés de manière simple. Alors allons-y pour lighten. On va aussi essayer de voir ce que ça donne. Lighten comme ceci, donc je vais avoir un jaune plus clair cette fois-ci, de 30%, plutôt que d’avoir un jaune plus sombre de 30%. Et voilà donc un dégradé avec un jaune plus clair qui tombe ici, vous le voyez, vers le blanc. Alors, je vais revenir ici sur le site lesscss.org. Vous voyez donc pleins d’opérations qu’on peut faire sur les couleurs. On peut faire un fade, un fadein, un fadeout, on peut mélanger des couleurs, etc., etc., on peut convertir en niveau de gris, changer le contraste, etc. Je vous invite à prendre le temps de venir sur ce site avant de regarder la vidéo suivante, et de passer en revue les différentes fonctions que vous avez à votre disposition. Vous allez voir que vous avez des fonctions de manipulations de chaînes de caractère, vous avez des fonctions mathématiques, par exemple pour faire des arrondis vers le haut ou vers le bas, la fonction sinus, cosinus, tangente, la fonction pi qui vous renvoie tout simplement le nombre pi, maximum, minimum également, donc des fonctions qu’on rencontre également dans d’autres langages, vous avez des vérifications de types, donc isnumber pour vérifier si un certain paramètre est un nombre ou pas, isstring pour vérifier si le paramètre est une chaîne de caractères, etc., etc. Donc prenez le temps de venir ici, de regarder un petit peu les fonctions qui sont à votre disposition. Même si vous ne les comprenez pas toutes comme ça de but en blanc. Simplement, essayez de voir ce qui existe et essayez d’imaginer des scénarios dans lesquels vous pouvez utiliser ce type de fonction. Vous allez voir que vous allez décupler votre pouvoir en css avec ces fonctions.

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 !