Découvrir LESS

Créer le code LESS de l'en-tête

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour continuer le développement de votre projet LESS, penchez-vous sur la mise en forme et le codage de l'en-tête de votre site.

Transcription

Poursuivons, si vous le voulez bien, le développement de notre application LESS, et nous allons maintenant passer aux styles css principaux de notre site. Donc je vais créer un nouveau fichier LESS, que je vais appeler mainstyles.less : mainstyles.less, comme ceci. Je vais aller chercher mainStyles.txt, qui est ici, alors, comme d’habitude, COMMANDE ou CONTRÔLE-A pour tout sélectionner, COMMANDE ou CONTRÔLE-C pour tout copier, je reviens dans mainstyles.less, et puis voilà, COMMANDE ou CONTRÔLE-V pour coller donc ceci dans mainstyles.less. Alors, il n’y a pas grand-chose de particulier ici, dedans, et avant de vous montrer ce qui se passe là-dedans, ne pas oublier, bien évidemment, de venir ici, dans styles.less pour venir importer les styles : import styles, et donc je vais importer maintenant mon nouveau fichier : mainstyles.less, comme ceci. Que se passe-t-il dans ce fichier mainstyles.less ? Je vais d’abord le sauvegarder. Eh bien, il n’y a rien de bien particulier. Je vais juste vous montrer une petite chose, d’abord ici, une mixin qui s’appelle responsive, qui rend donc mes images réactives. Alors, si je vais voir dans mes mixins, eh bien ça se trouve ici au-dessus. Regardez, je leur donne une largeur de 100% et une hauteur automatique, c’est comme ça qu’on rend des images réactives donc. Je vais également vous montrer cette mixin-ci, qui s’appelle centerContent, et donc c’est une toute simple mixin, regardez, qui se trouve ici, au-dessus, qui prend un paramètre avec une valeur par défaut de 100% et cette mixin, donc elle met une largeur qui est égale à ce paramètre, donc par défaut 100%, et des marges qui vont donc centrer le contenu. Autrement dit, chaque fois que je vais vouloir centrer quelque chose à l’intérieur d’un conteneur, eh bien je vais pouvoir utiliser cette mixin centerContent. Alors, autre petite chose ici, j’ai les media queries qui sont ici, dans le fond, c'est-à-dire l’adaptation de cette feuille de style aux différentes largeurs d’écran, mais regardez, pour établir mes média queries, eh bien j’utilise directement donc les variables définies dans variables.less, ici donc, au niveau des breakpoints. Vous voyez que je les utilise deux fois en fait, au niveau des media queries, et au niveau également de la définition de la largeur maximale de mon site. Donc c’est très très simple, et si un jour mes breakpoints doivent changer de place, mes points d’arrêts doivent changer de place, eh bien il me suffit d’aller changer les valeurs ici, et regardez, automatiquement à la recompilation, eh bien on recréera de nouvelles media queries comme ceci, sans venir changer donc ce fichier mainstyles.less. Alors on va continuer avec la mise en place de l’en-tête de mon site. Donc je vais créer un nouveau fichier, que je vais appeler header.less. Je vais également venir chercher ici header.txt, le voici. Donc COMMANDE ou CONTRÔLE-A pour tout sélectionner, COMMANDE ou CONTRÔLE-C pour copier, et puis je reviens dans header.less, COMMANDE ou CONTRÔLE-V pour coller. Je vais ne pas oublier bien évidemment, de revenir dans styles.less ici, et de venir importer, eh bien le fichier header.less que nous venons de créer. Je sauvegarde. Alors, dans ce fichier header.less, eh bien vous remarquez que j’ai adopté la notation imbriquée, comme ceci, pour faciliter donc la création de mon code. Alors deux-trois petites choses que j’ai envie de vous montrer ici, j’ai une mixin qui s’appelle column. Vous voyez ici que cet élément figure, eh bien j’appelle une mixin qui s’appelle column. Alors, je vais aller voir ce que c’est que cette mixin column, elle se trouve un petit peu plus bas ici de mon fichier mixin.less. Là voici. Elle est relativement sophistiquée, vous voyez que c’est une mixin qui en contient d’autres, donc qui contient la mixin cols ici. Cette mixin, elle va prendre trois paramètres : le nombre de colonnes, une éventuelle gouttière, c'est-à-dire un espacement entre les colonnes, et puis le nombre de colonnes qu’il y a dans la grille, et vous voyez que ce dernier paramètre que j’ai appelé gridCols, eh bien, il a une valeur par défaut, qui est égale à la variable colsInGrid, et rappelez-vous que cette variable est égale ici par défaut, à 12 puisque j’ai un designer qui a créé donc ce design avec 12 colonnes dans le fichier Photoshop. Qu’est-ce qu’elle fait cette mixin ? Dans mixin.less, voilà, elle va d’abord voir si j’ai besoin d’une gouttière ou pas, donc avec une mixin gardée ici, où when (@gutter = 0), et à ce moment-là on va calculer la largeur d’une colonne comme étant le nombre de colonnes que ça doit prendre, divisé par le nombre de colonnes dans la grille, et puis on convertit tout cela en pourcentage, donc la fonction percentage ici est l’une des fonctions de LESS et elle me permet de convertir un nombre en pourcentage, donc d’ajouter tout simplement % derrière. Lorsque la gouttière n’est pas égale à 0, donc lorsque j’ai besoin d’un interstice entre mes colonnes, alors là, le calcul il est un petit peu plus complexe, vous le voyez. J’utilise également une marge de droite pour établir donc cette espace, cet interstice entre deux colonnes, et puis je ne dois pas oublier bien évidemment d’exécuter cette mixin cols, sinon rien ne se passera. Donc comment j’utilise ceci ? Eh bien, quand je fais columns(6), ça veut dire que cet élément figure, eh bien j’ai envie qu’il prenne 6 colonnes sur les 12 disponibles. Même chose pour cet élément ul, j’ai envie qu’il prenne 6 colonnes sur les 12 disponibles. Par contre, vous voyez ici mon élément img, là j’appelle ma mixin mais de manière un petit peu différente. Donc j’ai besoin de 4 colonnes, d’une gouttière de 0, mais de 4 colonnes sur 6 puisque vous voyez que cette image se trouve ici à l’intérieur d’un élément qui prend 6 colonnes sur les 12, donc j’ai envie que cette image prenne 4 colonnes sur les 6 ici, disponibles. Donc vous voyez, j’ai adopté ici, une autre approche que celle que nous avions utilisée dans le chapitre précédent, qui consistait à générer des classes css avec une boucle. Ici, j’ai plutôt opté pour une mixin qui me calcule à chaque fois la largeur de l’élément dont j’ai besoin. Voilà ce que j’avais envie de vous montrer ici, au niveau de header.less. Remarquez que j’ai également défini ici des media queries pour l’adaptation de ce header aux différentes largeurs d’écran. Ça donne quoi, quand je reviens dans styles.less ? Je ré-appuie sur F9 pour recompiler. Vous voyez dans mon panneau de sortie que je n’ai toujours pas d’erreur, donc la compilation s’est bien passée. Et au niveau de mon navigateur, je rafraichis ma page et vous voyez que mon header, donc l’en-tête de mon site, est déjà à peu près en place.

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 !