Découvrir LESS

Travailler avec des variables

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Étudiez les variables LESS en détail. Vous apprendrez à déclarer des variables de différents types et à les utiliser dans votre code.

Transcription

Dans ce chapitre, nous allons parler des principes fondamentaux de less et puis dans cette première vidéo, eh bien, je vous propose de commencer simplement par les variables. Alors, je me vous retrouve ici dans une page html tout à fait simple, donc vous voyez, j'ai simplement un div que j'ai appelé wrapper et dans ce div, eh bien, je retrouve un titre de niveau 1, et puis une section avec un paragraphe de texte, donc c'est vraiment très très facile. Remarquez que cette page html a été liée ici à une feuille de style css qui s'appelle styles.css, qui se trouve dans le dossier styles de mon site, et puis, dans le dossier styles de mon site, eh bien, cette feuille de style n'existe pas encore, donc je vais la créer maintenant, mais plutôt que de créer directement mon fichier styles.css, eh bien, je vais plutôt créer un fichier styles.less comme ceci, c'est l'extension Brackets qui est active et qui me suit, qui va, vous le voyez, générer le fichier styles.css qui correspond de manière automatique. Alors première chose à dire ici, c'est que je ne vais jamais directement écrire du code dans le fichier styles.css, je vais toujours écrire dans styles.less. En effet, si vous ecrivez directement dans styles.css, eh bien, la prochaine fois que vous modifiez et puis sauvegarder styles.less, l'extension va regénérer le fichier styles.css et toutes les modifications que vous aurez apportées directement dans le fichier css, seront bien sûr écrasées et perdues. Donc je vais écrire toujours dans mon fichier less. Alors je vous disais plus tôt dans cette formation, dans l'introduction, que tout le css classique et normal que vous utilisez depuis toujours est du code less valide, alors on va faire l'expérience de cela. Donc, si j'écris ici du css classique dans mon fichier less, par exemple je vais faire un premier style pour mon élément wrapper, je vais lui donner une largeur, donc une width de 960 pixels par exemple, et puis des marges, du haut et du bas de 0 pixel à gauche et à droite, des marges automatique comme ceci, donc ça c'est du css tout à fait normal, il n'y a rien de less là-dedans. Donc quand je sauvegarde ce fichier less, eh bien, regardez ce qui est généré au niveau de styles.css, bah less c'est contenté tout simplement de copier-coller, de reporter ce que j'ai écrit dans le fichier less, dans le fichier css, il n'y a aucune erreur qui est générée, donc tout le css que vous connaissez déjà peut être utilisé tel quel dans vos fichiers less et ça, c'est une bonne nouvelle. Alors au niveau des variables, les variables, c'est une première fonctionnalité que less vient ajouter donc au css, un petit commentaire pour la clarté du code, eh bien, je vais par exemple définir une variable qui va se charger de la largeur du site, donc pour définir une variable en less, eh bien vous commencez par le symbole @ et puis vous mettez le nom de votre variable, je vais l'appeler par exemple ici siteWidth comme ceci, et puis avec les deux points, comme en css classique, vous donnez une valeur à cette variable, je vais donner ici une valeur de 960 pixels à cette variable. Alors au niveau du nom des variables, eh bien, toutes les règles classiques sont d'application, donc pas d'espaces, pas de caractères spéciaux, etc. Le plus simple, c'est de rester avec des chiffres et des lettres classiques, comme je viens de le faire ici. Alors, certaines personnes pour ne pas mettre d'espace préfèrent utiliser des « _ », comme ceci, on voit ça très souvent. Moi, j'ai plutôt pour habitude d'utiliser le camelCase, la casse en chameau, c'est-à-dire que je ne fait pas d'espace, ni de « _ » mais je mets une lettre majuscule à chaque début de mot. Alors finalement peu importe comment vous écrivez vos variables, du moment que les règles sont respectées. Simplement, si vous avez une convention, eh bien, gardez cette convention, ne changez pas en cours de route sinon vous n'allez pas vous y retrouver. Alors maintenant que j'ai une première variable qui est définie, eh bien, plutôt que de taper ici directement 960 pixels, je vais plutôt faire référence à ma variable. Voilà, donc je vais copier-coller ici le nom de la variable avec le symbole @, je sauvegarde mon fichier less, et regardez ce qui a été généré, c'est la même chose, donc ma variable a bien été utilisée ici pour générer donc la largeur de mon site. Si je change la valeur de ma variable, je vais mettre par exemple 900 pixels tout court plutôt que 960, voilà. Je sauvegarde et regardez ce qui se passe au niveau de mon fichier css, eh bien, c'est bien une largeur maintenant de 900 pixels qui est d'application. Donc voilà une première variable ici dans less. Alors cette variable représente une dimension en pixel mais vous pouvez utiliser des variables pour pleins d'autres choses, par exemple vous pouvez définir avec des variables, des couleurs, voilà. Colors, eh bien, je vais définir une première variable et que je vais appeler titleColor, et je vais la rendre égale à par exemple F0F. Donc ici dans Brackets, je vous rappelle que quand vous mettez votre souris sur un code couleur, vous voyez la couleur en question, voyez, c'est un espèce de rose comme ceci. Je vais également définir une autre variable que je vais appeler textColor comme ceci, et donc cette variable, eh bien, sera égale à la couleur 333, donc c'est du gris foncé, vous le voyez ici. Ça va me permettre de définir deux styles supplémentaires pour mes titres de niveau 1, et donc je vais définir la couleur des titres comme étant égale à la valeur de la variable less titleColor comme ceci, et puis je vais definir la couleur de mes paragraphes, voilà, comme étant égale à la valeur donc, de la variable textColor de less, qui se trouve ici. Et quand je sauvegarde ceci, et regardez ce qui a été généré, eh bien, vous voyez que c'est du css classique donc, mes variables ont correctement été utilisées ici. Donc des variables less, ça peut être des couleurs, ça peut être des dimensions, et en fait, ça peut être n'importe quoi. Par exemple, ça peut être également des polices de caractère, donc je vais définir par exemple ici une Titlefont. Voilà, je vais la rendre égale par exemple à Times New Roman comme ceci. Alors vous savez qu'en css, quand le nom de la police de caractère est composé de plusieurs mots, eh bien, je dois les mettre entre guillemets, et puis je vais définir également une bodyFont par exemple, voilà, qui sera égale à Verdana comme ceci, et puis, je vais utiliser donc ici font-family, eh bien, je vais mettre @titleFont, donc pour faire référence, voilà, à ma variable less et puis ici, font-family, je vais mettre @bodyFont comme ceci, voilà. Quand je sauvegarde, eh bien, regardez ce qui est généré, c'est tout simplement donc ici mes variables qui ont étés remplacées. Donc vous voyez que les variables less, ça peut être des codes couleurs, ça peut être des dimensions, donc des valeurs numérique en pixel par exemple ça peut être également des chaines de caractère, finalement peu importe, ça peut être un petit peu n'importe quoi. Alors attention, le nom de variable est sensible à la casse, donc regardez, si je mets ici bodyfont avec un petit f plutôt qu'avec un grand F, eh bien, j'ai un problème avec less-autocompile. Donc, c'est mon extension Brackets ici, qui ne sait pas bien faire son travail puisqu'elle me dit que la variable bodyfont avec un petit f is undefined, ah bah oui, c'est avec un grand F, donc on va aller changer ceci. Donc faites attention ici à la casse de vos variables. Pour le reste, vous voyez que c'est assez simple à comprendre et à utiliser. Si vous ne percevez pas encore toute la puissance de tout cela, rassurez-vous ça viendra dans les vidéos suivantes, mais donc voici une première fonctionnalité que less vient ajouter au css : la possibilité de définir des variables et puis de les utiliser dans les styles que vous allez créer.

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 !