Mixins et héritages avec Less.js

L'une des choses qui CSS Il n'a pas par défaut l'utilisation de structures de style programmation où nous pouvons réutiliser le code de manière logique, le plus que nous puissions réaliser de manière standard est de créer des classes et de regrouper dans les étiquettes ce que nous voulons être affecté par ces changements.

Cette approche signifie qu'en fin de compte, nous nous retrouvons avec de longues feuilles de style, et bien que ce résultat ne varie pas en utilisant Moins.js, si la façon dont on accède aux dites feuilles change, c'est grâce à la Mélanges et l'héritage, où l'on peut déclarer et utiliser certains composants, pour éviter d'avoir à développer manuellement les structures.

Exigences1- Afin de réaliser ce tutoriel, nous allons exiger certaines choses au préalable, nous avons besoin d'un dossier où nous pouvons stocker nos fichiers .moins Oui .css, nous devons avoir des autorisations dessus pour pouvoir apporter des modifications si nécessaire.

2- Nous devons avoir une installation fonctionnelle de Moins.js, ainsi que tous ses prérequis, car ils sont Node.js Oui npm, afin que nous puissions compiler nos feuilles de style générées.

3- Enfin nous aurons également besoin d'un éditeur de texte pour pouvoir faire le code, nous pouvons utiliser Texte sublime o NotePad ++, bien que le bloc-notes classique fonctionnera également pour nous, tout dépend si nous voulons de l'aide avec le code ou des fonctionnalités avancées.

Définir les propriétés CSS avec un MixinL'une des premières choses que nous devrions savoir sur Mélanges, c'est que ce sont des méthodes qui nous aident à établir les propriétés CSS pour notre projet, de manière à nous aider à réutiliser le code et à obtenir des styles plus cohérents. La particularité d'un Mixin est que lors de la compilation de notre code Moins Ceci n'est pas pris en compte, dans le sens où une feuille de style Mixins n'est pas générée, ceci est réalisé en incluant des parenthèses lors de leur définition, une fois que nous avons un Mixin nous devons importer son fichier source et de cette façon simplement ses valeurs sont transféré sur notre feuille principale que nous inclurons sur notre page.

Création de notre premier Mélanger
Créons un Mélanger qui nous permet d'établir la propriété CSS arrondir les bords d'un élément dans notre HTML, pour cela nous devons suivre les étapes suivantes :

1- Nous allons créer dans notre dossier de projet un fichier nommé mixins.less, et à l'intérieur nous placerons le contenu suivant :

 .rounded-edges () {border-radius: 7px; }

2- Nous allons maintenant créer un fichier appelé projet.moins, c'est ici que nous allons établir la manière dont les différents styles de notre page seront appliqués HTML, pour qu'on s'habitue à travailler avec Moins nous allons créer plusieurs règles CSS afin que nous puissions voir comment le MélangesVoyons le code que nous devons mettre dans ce fichier.

 @import "mixins.less"; @ header-background-color : bleu ; @ content-background-color : vert ; @ footer-background-color : rouge ; en-tête {.bords arrondis (); background-color: @ header-background-color; couleur : contraste (@ header-background-color); } p {.bords arrondis (); background-color : @ content-background-color ; couleur : contraste (@ content-background-color) ; } pied de page {. bords arrondis (); background-color: @ footer-background-color; couleur : contraste (@ footer-background-color) ; }

Comme on peut le voir, on commence par importer le fichier que l'on a généré à l'étape précédente, puis on établit 3 variables auxquelles on donne une couleur comme valeur, enfin on commence à créer les classes pour les éléments HTML, la première chose que nous faisons est d'appeler notre fonction Des bords arrondis(), puis nous attribuons les couleurs des éléments aux variables.

3- Dans cette étape, nous allons créer le fichier HTML, que nous pouvons appeler ce que nous voulons tant qu'il a une structure comme la suivante :

 Mixins avec Less La cabecera
Le contenu
Bas de page 

Comme nous pouvons le voir nous avons simplement fait l'inclusion de notre fichier .moins comme le .js qui contient l'outil, nous avons opté pour cette option afin de ne pas avoir à compiler, cependant nous devons nous rappeler que cela ne doit pas être appliqué en production. Dans le corps du HTML Nous générons les différents éléments que nous avions définis dans le CSS afin de voir l'application des styles.

4- Enfin, si on veut voir le résultat, il suffit d'ouvrir notre document dans un navigateur comme Firefox et pour que nous puissions voir à quoi tout ressemble, voyons dans l'image suivante ce que nous avons :

Si nous allons un peu plus loin, et voyons le code source que le navigateur interprète, nous verrons comment les différentes variables et les Mélanger appliqué, il a en fait été remplacé par le code CSS, ce qui signifie que même si nous n'avons écrit la propriété qu'une seule fois Moins le place là où correspond le match, voyons :

Hérédité dans nos styles
Travailler avec les héritages est quelque chose qui nous aide et c'est pour la raison que nous pouvons créer des éléments supérieurs qui transmettent certaines propriétés à leurs éléments inférieurs ou contenus, c'est-à-dire qu'il existe des caractéristiques communes que nous n'aurons pas à répéter dans les éléments que nous voulons de les avoir.

Comme toujours, l'objectif de ne pas répéter le code est de nous faire gagner du temps et du travail, ainsi que de réduire les erreurs et d'augmenter la maintenabilité de notre code grâce à la cohérence et la centralisation de ses ressources.

L'un des moyens les plus basiques mais efficaces de travailler l'héritage est d'utiliser des éléments imbriqués, disons que nous avons une section HTML et à l'intérieur nous aurons plusieurs éléments, si nous utilisons le CSS Classique pour dire que tous les éléments de cette section ont des propriétés mais celles-ci sont différentes, il faudrait faire au moins une ligne pour chaque style, voyons de quoi on parle :

 élément de section1 {contenu1 : xx; } section element2 {contenu2: zz; }

Comme nous pouvons le voir, nous créons plus de code que nécessaire, à la place si nous utilisons l'héritage et l'imbrication dans Moins nous pourrions obtenir quelque chose comme ce qui suit :

 section {élément1 {contenu1 : xx; } élément2 {contenu2 : zz; }}

Comme on peut le voir, non seulement nous écrivons moins, mais aussi la représentation de ce que nous voulons réaliser est beaucoup plus logique, ce qui nous aide à comprendre et à bien séparer les éléments que nous allons utiliser dans nos styles.

Création styles imbriqués
Maintenant nous allons appliquer ce que nous venons d'expliquer au point précédent, nous devons créer un fichier .moins où nous créons un style imbriqué, afin d'économiser le travail et de le rendre plus logique. Pour réaliser cette tâche, nous devons suivre les étapes suivantes :

1- Créons un fichier.moins comment pouvons-nous appeler héritage.moins, c'est là que nous allons créer les styles imbriqués, pour comprendre cela nous verrons simplement le code que nous allons placer et ainsi le concept nous viendra de meilleure manière.

 section {h1 {font-size: 4em;} p {padding: 0 5px;}}

Nous voyons que nous avons créé un style pour l'élément section, et que tout h1 ou alors p dans cet élément conteneur, il doit fonctionner avec les règles établies que nous avons imbriquées.

2- Maintenant, nous devons créer notre fichier HTML qui va ressembler beaucoup à l'exercice précédent, quels changements sont les noms des fichiers à inclure et la structure dans le corps, mais si nous le voyons de manière abstraite, nous parlons de la même chose, regardons le code.

 Héritage en moins
Notre contenu

Comme on le voit simplement en incluant notre fichier Moins est que nous allons générer les styles nécessaires, si nous voyons à quoi cela ressemble dans le navigateur, nous obtiendrons quelque chose comme ceci :

Cependant, si nous remarquons ce qui se passe avec le CSS Lorsqu'il est interprété ou compilé, nous verrons que la forme imbriquée que nous avons construite n'est pas respectée, mais puisque le compilateur fait cette forme non imbriquée directement, nous n'avons pas à nous soucier qu'il en soit ainsi, voyons ce que le le code que notre navigateur voit ressemble à :

Avec cela, nous pouvons terminer ce tutoriel, comme nous l'avons vu Moins ce n'est pas qu'écrire CSS d'une manière différente, est de rendre ces différences utiles, ce qui nous permet de gagner du temps, de rendre les applications plus conviviales pour notre équipe de développement et d'économiser des efforts en pensant plus logiquement et en réutilisant les composants. La façon dont tout cela a le plus de sens pour nous est que nous continuons à pratiquer et à appliquer ces exemples dans des cas pratiques et réels afin que nous puissions nous habituer à cette façon de travailler.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif