L'essentiel de Sass

Créer ses propres fonctions

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Utilisez la directive @function afin d'étendre le langage Sass. Vous vous reposerez aussi sur vos propres fonctions.

Transcription

Dans le chapitre précédent, vous avez découvert que le langage SASS vous propose une série de fonctions, notamment pour manipuler des couleurs. Nous avions d'ailleurs utilisé certaines de ces fonctions pour générer ce magnifique dégradé dans l'entête de notre site. Dans cette vidéo, vous allez découvrir que SASS vous permet de créer vos propres fonctions. Et c'est, pour nous, la troisième manière de réutiliser du code dans notre application SASS. Pour vous illustrer tout cela, j'ai créé, dans le fichier Variables.scss, une nouvelle variable, dans le fond, que j'ai appelée defaultUnit et qui est égale à la chaîne de caractère « px », pour « pixel ». J'insiste, c'est une chaîne de caractères, ceci est entre guillemets, ça aura son importance dans la suite des opérations. J'ai également créé un nouveau fichier, qui s'appelle myFunctions.scss, qui est complètement vide pour le moment, et puis, ce nouveau fichier, je l'ai importé dans mon application SASS via le fichier principal, Styles.scss. Vous voyez que je l'importe en ligne 3. C'est-à-dire après mes variables mais avant mes « mixins ». C'est très important que ce soit dans cet ordre-là puisque je risque d'avoir besoin de mes fonctions personnalisées quand je crée mes « mixins », donc ça doit être appelé avant. L'idée de la fonction que je vais créer, et pour bien comprendre cela, je vais retourner dans Buttons.scss, là où j'appelle ma « mixin borderRadius ». Si je passe à cette « mixin » une valeur comme ceci sans préciser l'unité de mesure, la fonction que je vais créer va devoir rajouter l'unité de mesure par défaut définie dans Variables.scss, à la valeur que je passe à ma « mixin ». Par contre, si je passe une unité de mesure, par exemple si je mets 10%, 10em ou encore 10px, ma fonction ne doit rien faire. Elle doit garder l'unité de mesure qui a été envoyée à la « mixin ». Alors, allons-y gaiement ! Je vais revenir à la situation de départ, je vais dans mon fichier myFunctions.scss, et je vais écrire ma fonction. Pour cela, j'ai besoin du mot-clé @function du langage SASS, et puis je vais donner un nom à ma fonction : « unitize ». Dans la plupart des langages, les fonctions ont besoin de parenthèses suivies d'une paire d’accolades, c'est le cas également en langage SASS. Dans les parenthèses, si vous faites un peu de programmation, en JavaScript, par exemple, vous savez qu'on peut utiliser ces parenthèses pour permettre à cette fonction de recevoir des données. Un peu comme on avait fait avec nos « mixins » dans la vidéo précédente. Ici, cette fonction va pouvoir recevoir un paramètre que je vais appeler Value. C'est la valeur, le nombre auquel je dois adjoindre l'unité de mesure. Qu'est-ce que je vais devoir faire avec cette Value ? Je vais reprendre cette Value qui m'est passée à la fonction et je vais ajouter à cette valeur la variable defaultUnit que j'ai définie dans Variables.scss, donc, dans mon cas, px. J'insiste sur une chose, DefaultUnit est une chaîne de caractères puisque dans le fichier Variables.scss, j'ai mis des guillemets autour de px. Le plus qui est ici n'est plus l'opérateur d'addition mais l'opérateur de concaténation, c'est comme en JavaScript. Quand j'ai une chaîne de caractères d'un des deux côtés, du + au -, ce qui est le cas ici, Value sera quasiment tout le temps un nombre, defaultUnit sera toujours une chaîne de caractères à cause de ces guillemets. Dans ce cas-là, le + va devenir l'opérateur de concaténation et la concaténation me permet de joindre deux chaînes de caractères et donc ici, on ne fera pas d'addition en tant que telle. Si vous faites de la programmation, vous savez qu'une fonction doit être capable de recevoir des paramètres, je l'ai déjà fait dans mes parenthèses, elle doit être également capable de retourner un résultat. Pour cela, dans SASS, je dois utiliser la directive Return, comme ceci, je vais renvoyer la valeur avec l'unité de mesure par défaut. On va voir si ça marche, je vais sauvegarder ma fonction. Je vais me rendre au niveau de ma « mixin » et, plutôt que de faire un Radius comme ceci, je vais la faire passer par ma fonction Unitize, voilà. Je vais donner son unité de mesure à ce Radius. Je vais copier-coller tout cela dans les autres lignes de code, je sauvegarde ma « mixin », je reviens dans Buttons.scss, et quand je passe la valeur sans spécifier l'unité de mesure, je sauvegarde, ça donne bien 10px, ma fonction fonctionne, elle ajoute l'unité de mesure par défaut à la valeur que je lui passe, mais l'opération de concaténation me renvoie une chaîne de caractères. Vous remarquez que j'ai des guillemets autour de 10px. Ça ne marche pas bien, dans la norme scss, je n'ai pas besoin de ces guillemets. Comment faire ? Rappelez-vous qu'on a des fonctions, dans SASS. On a des fonctions pour manipuler des couleurs, on en a déjà utilisé, mais on en a aussi pour manipuler des chaînes de caractères. Justement, il y a des fonctions pour manipuler des chaînes de caractères. Unquote retire les guillemets d'une chaîne de caractères. Au passage, vous voyez qu'il y a la fonction inverse, Quote, pour ajouter des guillemets autour d'une chaîne de caractères. C'est ça donc j'ai besoin, ici, je vais retourner à myFunctions.scss, et je vais retourner Unquote de tout ceci, je sauvegarde, je reviens dans Buttons.scss, je vais recompiler, voilà, vous voyez que ça fonctionne. J'ai bien ma fonction Unitize qui ajoute l'unité de mesure par défaut à mon Radius et si je mets une autre valeur sans unité de valeur, ça devient px, grâce à ma fonction Unitize. Est-ce que ça marche dans tous les cas de figure ? Si je ne mets rien, rappelez-vous qu'on avait une valeur par défaut. Ah oui, là, cela devient 5pxpx... Eh bien oui parce que ma valeur par défaut, dans Variables.scss, c'est déjà 5px. Comment je vais faire ? Ici, je peux tricher un petit peu, je peux mettre 5 tout court en me disant que c'est 5 avec l'unité de mesure par défaut, voilà, ça solutionne temporairement mon problème, ça fonctionne bien. Mais que va-t-il se passer si je passe une autre unité de mesure que px ? Par exemple, je vais mettre 10%, je sauvegarde et ça devient 10%px. Là, c'est beaucoup plus problématique. Je vais aussi avoir un autre problème pour mes autres BorderRadius, si j'utilise Include, ma « mixin » BorderRadius, et que je passe comme paramètre : « 5px 0 0 5px », comme ceci, je n'ai plus besoin de la ligne du dessous. Que va-t-il se passer avec mon Unitize ? Il va me mettre « 5px 0 0 5pxpx », il va mettre px à la fin, si je retire mes unités de mesure, voyez ce qu'il va faire « 5 0 0 5px ». Ça ne va pas non plus, donc ma fonction fonctionne, oui, nous avons découvert que SASS permet de créer nos propres fonctions, que ces fonctions peuvent recevoir des paramètres et renvoyer des résultats, mais cette fonction ne fonctionne pas, pour le moment, dans tous les cas. Pour résoudre tous ces problèmes, je vous donne rendez-vous dans le prochain chapitre. Nous allons voir des fonctionnalités plus avancées de SASS qui vont nous permettre de perfectionner cette fonction.

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 !