Share
Dans ce tutoriel, nous couvrirons de manière exhaustive le LESS boucle (associé à quelques autres fonctionnalités LESS dont nous avons déjà parlé, telles que Mixins Guards et Color Functions). Le bouclage est une fonctionnalité très utile dans LESS et nous permet d’automatiser de nombreuses tâches de style répétitives..
La «boucle» est une méthode de programmation qui répète (ou itère) une fonction. Généralement, il est utilisé pour traiter une liste de données. Si vous avez de l'expérience avec un autre langage de programmation, vous aurez certainement déjà rencontré une boucle.
Dans LESS, la syntaxe de base ressemblerait un peu à ceci:
.boucle (@ paramètres) quand (@condition) .loop (@ paramètres + 1); // itérer. // fais la chose ici.
Nous définissons une boucle LESS de la même manière que nous définissons Mixin Guards, mais cette fois nous imbriquons une fonction LESS qui incrémentera les paramètres transmis: .boucle (@paramètres + 1). Selon le scénario, la fonction peut aussi être une décrémentation: .boucle (@parameters - 1). La fonction bouclera et itérera tant que la condition: quand (@condition) est apparié.
Voyons comment nous pouvons utiliser une boucle dans des exemples réels.
Supposons que nous voulions créer une boîte d’alerte, nous définissons donc les styles de base; un peu de rembourrage et une bordure. Nous aimerions créer plusieurs variantes de la boîte d’alerte pour transmettre différents types d’alerte. Vous pouvez, par exemple, avoir une boîte d’alerte rouge pour afficher une erreur ou verte pour signaler un succès. Avec une boucle, nous pouvons rendre la mise en place de ces styles assez pratique.
Commencez par définir la liste des couleurs et les variantes de nom du champ d’alerte. Puis comptez le nombre de variations en utilisant le longueur() une fonction.
@colors: # ED5565, # A0D468, # F6BB42, # 5D9CEC; @names: erreur, succès, attention, info; @length: longueur (@colors);
Maintenant nous définissons la boucle pour réaliser la liste:
.alerte-variation (@names; @colors; @ index) lorsque (iscolor (extrait (@colors, @ index))) et (@ index> 0) .alert-variation (@names; @ couleurs; (@ index - 1)); // décrémente.
Comme vous pouvez le voir ci-dessus, notre boucle s'appelle .variation d'alerte, et cela nécessite quelques paramètres:
Accentsconagua
@des noms: nous allons utiliser cette variable pour transmettre la liste des variations de nom d'alerte.@couleurs: cette variable passera les codes de couleur de chaque nom respectif sur le @des nomsliste.@indice: cette variable passera le nombre de noms et de couleurs que nous avons dans la liste, et que nous utiliserons également pour itérer la boucle.Nous avons également défini une condition sur laquelle exécuter la boucle. La première condition que nous avons définie dans l’exemple ci-dessus déterminera si les valeurs transmises à la @couleurs sont des couleurs réelles au lieu de valeurs arbitraires (auquel cas nous abandonnerons la boucle). La prochaine condition définie arrêtera la boucle lorsque le @indice décrément a atteint 0.
Ensuite, nous définissons les règles qui composent les styles.
.alerte-variation (@names; @colors; @ index) lorsque (iscolor (extrait (@colors, @ index))) et (@ index> 0) .alert-variation (@names; @ couleurs; (@ index - 1)); // décrémente. @nom: extraire (@names, @index); @color: extrait (@colors, @index); .alert - @ name border-color: darken (@color, 10%); couleur: assombrir (@color, 30%); couleur de fond: @color;
Puisque nous utilisons une liste qui porte les couleurs de la boîte d’alerte, nous devrons utiliser la touche MOINS. extrait() fonction pour récupérer la couleur et le nom correspondant à chaque itération de la boucle. Ensuite, nous ajoutons le nom en tant que sélecteur de classe, tandis que la couleur est appliquée à la frontière, Couleur, et le Couleur de fond Propriétés.
Nous sommes tous prêts et prêts à utiliser la boucle avec les entrées:
.alerte-variation (@names; @colors; @length);
Nous avons une liste de quatre couleurs avec une liste de leurs noms respectifs dans le @des noms variable. L’itération de notre boucle commence à partir de la 4ème couleur de la liste et descend à 0 comme nous décrémentons la @indice à chaque itération. Pour chaque itération, la boucle générera le nom de la classe et la variation des règles de style. Cet exemple est donc compilé dans:
.alert-error border: # e8273b; couleur: # 99101f; couleur de fond: # ed5565; .alert-success border: # 87c940; couleur: # 537f24; couleur de fond: # a0d468; .alert-attention border: # f4a911; couleur: # 986807; couleur de fond: # f6bb42; .alert-info border: # 2f80e7; couleur: # 12509e; couleur de fond: # 5d9cec;
Vous pouvez en ajouter d’autres dans la liste et la boucle la compilera en une nouvelle variante en un instant..
Vous pouvez également appliquer une approche similaire pour créer un motif de style d'autres éléments d'interface utilisateur sur votre site Web, tels que les boutons ou (peut-être) les couleurs de la marque de votre site réseau..
Le Web regorge de frameworks CSS - et même si certains d'entre eux sont conçus pour être «à taille unique», en réalité, cela peut ne pas toujours être le cas. Assez souvent, vous n’avez peut-être besoin que du réseau réactif. Alors pourquoi ne pas créer le vôtre?
Les boucles facilitent la création de classes de grille. Voici une boucle simple qui génère les noms de classe de colonnes et détermine le pourcentage de largeur de chacune d’elles:
.grid (@name; @columns; @ index: 1) lorsque (@ index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) );
Notez que nous effectuons maintenant une incrémentation dans la boucle. Pour cette raison, nous définissons la condition de boucle avec (@ index =< @columns) ("Tant que l'index est inférieur ou égal au nombre de colonnes") pour éviter que l'itération ne dépasse le nombre de colonnes.
Utilisez cette boucle en passant le nom du sélecteur de classe généré et le numéro de colonne de la grille. Quand il s’agit de nommer, c’est à vous de décider, bien que vous souhaitiez peut-être suivre la convention Bootstrap col-sm, col-md, et col-lg ou peut-être petit, moyen, et grand suivant le motif de la Fondation, comme suit:
Écran @média uniquement et (largeur minimale: 360 pixels) .grid (petit; 12);
Ici nous avons utilisé notre .la grille() boucle et passé les valeurs petit et 12. Cela va compiler dans:
Écran @média uniquement et (min-largeur: 360px) .small-12 width: 100%; .small-11 width: 91.66666667%; .small-10 width: 83.33333333%; … Small-1 width: 83.33333333%;
Comme vous pouvez le voir ci-dessus, notre boucle ne génère actuellement que la largeur des colonnes. Nous devons également faire flotter ces colonnes, et il existe plusieurs façons de le faire. Par exemple, nous pouvons ajouter un sélecteur de classe, disons .colonne, nid sous le @médias définition de la requête et «l’étendre» dans la boucle.
// la boucle .grid (@name; @columns; @ index: 1) quand (@ index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // using the loop @media only screen and (min-width: 360px) .column float: left; .grid(small; 12);
Regardez de plus près et vous constaterez que nous avons défini le :étendre syntaxe sous un Mixin Guard. Cela assurera la .colonne Le sélecteur s’applique uniquement aux colonnes 1 à 11, car nous nous attendons à ce que la 12 flotte ingérence.
La boucle générera la sortie suivante lors de la compilation:
Écran @média uniquement et (largeur minimale: 360 pixels) .colonne, .petit-11, .petit-10, .petit-9, .small-8, .small-7, .small-6, .small-5 , .small-4, .small-3, .small-2, .small-1 float: left; .small-12 width: 100%; .small-11 width: 91.66666667%;
Si nécessaire, vous pouvez également personnaliser la boucle pour générer des classes afin de pousser les colonnes vers la droite. Dans Bootstrap, ceci est appelé compensation. Encore une fois, nous ne générerons pas ceci pour la 12ème colonne car nous avons compensé la colonne 100% serait probablement peu pratique.
.grid (@name; @columns; @ index: 1) lorsque (@ index =< @columns) .grid(@name; @columns; (@index + 1)); .@name-@index width: ( percentage(@index / @columns) ); & when ( @index < @columns ) &:extend(.column); // Generate the offset classes & when ( @index < @columns ) .@name-offset-@index margin-left: percentage( (@index / @columns) );
Notre boucle devrait maintenant générer un ensemble de nouvelles classes lors de la compilation:
Écran @média uniquement et (min-largeur: 360px) … petit-11 largeur: 91.66666667%; .small-offset-11 margin-left: 91.66666667%; .small-10 width: 83.33333333%; .small-offset-10 margin-left: 83.33333333%; .small-9 width: 75%; .small-offset-9 margin-left: 75%; …
Pour certains, l'idée de la boucle peut ne pas être facile à comprendre pour commencer. Et c'est tout à fait normal Il m'a fallu un certain temps avant de savoir quoi faire avec les boucles. J'espère que ce tutoriel vous donnera un bon départ. Ici, nous avons montré comment générer rapidement des modèles de style d'interface utilisateur. Nous avons également appris à créer notre propre système de grille, de manière à être plus conscients des styles sur notre site Web au lieu d’ajouter aveuglément du code à balles dans un cadre inutile..
N'hésitez pas à lire ce didacticiel plusieurs fois pour découvrir comment tirer parti de la boucle et rendre votre création de style CSS plus efficace..
