L'essentiel de Sass

Exploiter les fonctions de Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Manipulez des couleurs ou d'autres types de variables grâce à un certain nombre de fonctions proposées par Sass.

Transcription

Nous savons déjà que « Sass » nous permet d'utiliser des variables, des opérateurs mathématiques et une syntaxe imbriquée, qui ressemblent un petit peu à celle du « JavaScript ». Vous allez voir que c'est loin d'être tout. Dans cette vidéo, vous allez découvrir que le langage « Sass » vous propose une série de fonctions que vous allez pouvoir utiliser dans la rédaction de vos feuilles de style. Pour vous illustrer tout cela, toujours la même page « html ». Vous voyez que j'ai, simplement, changé le fond de l'élément « body », pour y inclure cette image. Mais, ce que j'ai envie de faire, dans un premier temps, c'est de changer la couleur de fond de l'en-tête de ce site. Vous voyez que pour le moment, l'en-tête utilise ce vert uni. C'est une couleur complètement opaque et unie. C'est la même couleur à travers tout l'en-tête. J'ai envie de changer cela en un dégradé. Mais, dans le fond de ce dégradé, j'ai envie d'utiliser le vert que j'utilise pour le moment, et puis, au début du dégradé, ici, au-dessus de l'en-tête, j'ai envie d'utiliser une couleur un peu plus claire, de ce même vert. Évidemment, si je change d'avis et que j'ai envie d'utiliser un autre vert ou même une autre couleur, mettons, par exemple du bleu. Je devrai calculer un dégradé entre ma nouvelle couleur et une teinte, un petit peu plus claire, de cette nouvelle couleur-là. Alors, comment va-t-on réaliser cela ? Je vais retourner sur le site de « Sass » pour aller voir dans la documentation. Ici, au niveau du bouton « Class List », je vais faire une recherche sur les fonctions du langage « Sass ». Il y a beaucoup de fonctions dans « Sass ». Vous avez des fonctions qui vous permettent de manipuler des couleurs en « RGB ». Vous avez des fonctions qui vous permettent de manipuler des fonctions en « HSL », des fonctions qui vous permettent de manipuler l'opacité de vos couleurs, vous avez des fonctions pour manipuler les chaînes de caractères pour manipuler des nombres et pour manipuler des listes. Bref, vous avez une multitude de fonctions dans le langage « Sass ». Je vais vous montrer celle que l'on va utiliser pour réaliser notre dégradé. Cela se trouve dans la catégorie « HSL », c'est la fonction « lighten » qui rend une couleur plus claire. Au passage, regardez, juste en dessous, la fonction « darken » qui rend une couleur plus foncée. Vous voyez qu'il y a moyen de faire beaucoup de manipulation. Donc, pour « lighten ». Je vais cliquer dessus, pour voir comment cela marche. Cela fonctionne comme cela. J'ai besoin de lui envoyer deux paramètres. Le premier, c'est la couleur que j'ai envie d'éclaircir, donc, la couleur à manipuler. Le second paramètre qui s'appelle « amount », c'est la valeur par laquelle je veux éclaircir ma couleur. Vous voyez que ce deuxième paramètre, c'est un nombre entre 0 et 100 % et ce que cette fonction me retourne, c'est une couleur avec la luminance, la « lightness » augmentée de la valeur passée dans le paramètre « amount ». Allons voir ce que cela donne, si vous le voulez bien, dans notre feuille de style. Voici ici, en ligne 32, la propriété « CSS », qui met en place la couleur de fond, le « background-color », de mon élément « header ». Alors, c'est « green », qu'est-ce que c'est que « green » ? C'est ce code couleur-ci, « 699 », voilà la couleur que je considère comme étant « green », ici. Je vais modifier cela. Voilà. À la place, j'ai besoin d'un « linear-gradient(); », comme ceci, avec le point-virgule. Et donc, la deuxième couleur de mon dégradé, je sais que ce sera « green », donc je vais le copier-coller ici. Cela m'évitera les fautes de frappe. Et la première couleur du dégradé, celle qui sera au-dessus de l'en-tête, c'est une couleur éclaircie, de ce vert. Donc, je vais utiliser ma fonction « lighten ». C'est une fonction de « Sass ». Premier paramètre de cette fonction, la couleur à manipuler, c'est « green ». Second paramètre de cette fonction, par combien de %, veux-je éclaircir cette couleur ? Mettons que je veux l'éclaircir de 20 %. Je sauvegarde. Regardez ce qui a été généré dans la feuille de style « CSS ». Un dégradé linéaire et regardez, surtout, les deux codes couleurs dans les parenthèses. Le deuxième, c'est tout simplement mon « green », « 699 », cela correspond à la valeur de ma variable « green ». Mais, l'autre code couleur « a3C2C2 », c'est le résultat de cette fonction. C'est-à-dire l'éclaircissement de 20 %, de cette couleur « 699 », de ce vert. Et cela donne quoi ? Sur ma page web, voilà mon dégradé. Bien évidemment, vous devinez la suite, si je change la valeur de cette variable « green », par exemple, je vous ai parlé, tout à l'heure, de bleu. Je ne vais pas vous décevoir, nous allons prendre un bleu, ici. Je sauvegarde. Qu'est-ce qu'il m'a fait ? Il m'a, tout simplement, recalculer un nouveau dégradé, à partir de mon nouveau bleu, donc, de la nouvelle valeur de la variable « green », qui, pour le coup n'est plus « green », mais ce n'est pas très grave. Voilà ce que cela donne, on va calculer un nouveau dégradé. Autre fonction disponible dans « Sass », je vais revenir, ici, au-dessus, c'est une fonction qui va me permettre de manipuler l'opacité de mes couleurs, vous voyez que j'ai beaucoup de façons de manipuler l'opacité de mes couleurs. J'ai une fonction qui s'appelle « opacify », qui rend une couleur plus opaque. Et, j'ai une fonction qui s'appelle « transparentize », qui rend une couleur plus transparente. Alors, cette fonction « transparentize », elle prend une couleur et elle prend un « amount ». Mais, l'« amount », ici, c'est quoi ? C'est un numéro entre 0 et 1. Donc, cela va me renvoyer la couleur mais, avec une opacité diminuée de l'« amount » que j'ai choisi, ici. Je vais revenir dans ma feuille de style. Au niveau de mon « wrapper », vous voyez que j'ai, ici, une « background-color » qui est « white ». C'est quoi ce « white » ? C'est, cette variable-ci. C'est-à-dire, le code hexadécimal « FFF » qui correspond au blanc opaque dans le « CSS ». J'ai envie de faire un « transparentize » de cette couleur-là et j'ai envie de la « transparentiser », si vous voulez, de « 0.2 ». Donc, voilà ce qui a été généré, c'est une couleur en « rgba », c'est du blanc avec une opacité, vous voyez, de 80 %, donc 20 % de moins que la transparence originale qui était à 100 %, puisque la couleur est opaque, au départ. Cela donne quoi ? Cela me donne que la partie principale de mon site est maintenant semi-transparente et je peux voir mon image, ici, à travers. Voilà deux fonctions de « Sass ». Il y en a beaucoup d'autres. Regardez, ici, sur cette page. Je vous invite à vous rapprocher de cette page, à regarder les fonctions qui sont disponibles et vous allez littéralement décupler votre puissance « CSS » grâce à ces fonctions de « Sass ».

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 !