Points de base
map-get() peut toujours fournir la valeur souhaitée même si une valeur est manquante. Le titre de cet article peut surprendre certaines personnes. Si vous êtes un vétéran du SASS, vous vous souvenez peut-être d'utiliser une liste de listes pour simuler les jours où les tableaux de données imbriqués (avant Ruby-Sass-3.3). (Ruby) Sass 3.3 ajoute un nouveau type de données appelé mappage. Les listes de listes peuvent enregistrer des données complexes dans des formats imbriqués, mais n'ont pas de couple de valeur clé. La carte ajoute des paires de valeurs clés et permet de créer un tableau de données.
Avec l'avènement de la cartographie, beaucoup de nos utilisateurs de Sass ont commencé à tout mettre dans la cartographie (et pour une bonne raison!). Toutes les largeurs de point d'arrêt, les valeurs de couleur, les dispositions de grille, les proportions de type et autres détails de typographie réactive peuvent être placées sur la carte!
Maintenant que Sass a une cartographie de paire de valeurs clés, y a-t-il une bonne raison d'utiliser une liste de listes? Une raison théorique est la compatibilité en arrière: si votre SASS est probablement maintenu par un développeur avec des versions plus anciennes installées, la liste les aidera. Cependant, dans la pratique, la version SASS est généralement contrôlée par package.json ou d'autres configurations de projet, et le Ruby Gem peut être mis à jour avec une seule commande (gem update sass).
Une raison plus pratique pour laquelle vous pourriez choisir d'utiliser des listes imbriquées au lieu de mappages est qu'il y a moins d'entrée. Comparons les cartes et les listes imbriquées pour voir comment ils se comparent dans leur syntaxe respective et leur traversée de boucle.
Comparaison de grammaire
Dans notre exemple, créons une structure de données qui contrôle la typographie réactive. Il stockera quatre points d'arrêt (enfin, l'un est la plus petite vue par défaut). Pour chaque point d'arrêt, nous stockons la largeur minimale, la largeur maximale, la taille de la police de base et la hauteur de la ligne de base.
Ce qui suit est de savoir comment stockons les données sur une carte. Une grande carte contiendra quatre touches (étiquettes de point d'arrêt) dont les valeurs sont des cartes de variables que nous devons stocker et utiliser. Dans ce format lisible, nous avons plus de 450 caractères et 26 lignes.
<code>$breakpoint-map: (
small: (
min-width: null,
max-width: 479px,
base-font: 16px,
vertical-rhythm: 1.3
),
medium: (
min-width: 480px,
max-width: 959px,
base-font: 18px,
vertical-rhythm: 1.414
),
large: (
min-width: 960px,
max-width: 1099px,
base-font: 18px,
vertical-rhythm: 1.5
),
xlarge: (
min-width: 1100px,
max-width: null,
base-font: 21px,
vertical-rhythm: 1.618
)
);</code> Les listes imbriquées qui stockent les mêmes données sont beaucoup plus courtes. Cependant, nous n'engageons plus la clé des données, nous devons donc compter sur le bouclage ou l'appeler avec la fonction nth(). Autrement dit, il est beaucoup plus court que la carte: moins de 180 caractères, seulement 6 lignes.
<code>$breakpoint-list: ( (small, null, 479px, 16px, 1.3), (medium, 480px, 959px, 18px, 1.414), (large, 960px, 1099px, 18px, 1.5), (xlarge, 1100px, null, 21px, 1.618) );</code>
Comparaison du cycle
Lors de la rédaction d'une structure de données, l'écriture d'une liste ne nécessite que l'écriture d'un tiers du temps de cartographie. Mais si nous devons parcourir ces valeurs, comment comparer?
Nous pouvons parcourir les éléments supérieurs de cette carte en utilisant le code suivant:
<code>@each $label, $map in $breakpoint-map {}</code> Les deux variables ($label et $map) au début de cette ligne sont allouées dynamiquement lors de l'itération des données de la carte dans la boucle. Chaque bloc de données de niveau supérieur a deux composants: les touches et les valeurs. Nous attribuons la clé à $label et la valeur (qui est une carte imbriquée) à $map. Dans cette boucle, nous pouvons utiliser les variables $label et $map, qui représenteront automatiquement la clé et la valeur de l'entrée actuelle.
La boucle itérera quatre fois, une carte imbriquée chaque itération. Cependant, pour obtenir des données utiles à partir de cartes imbriquées, nous devons utiliser la fonction map-get(). Cette fonction prend deux paramètres - le nom de la carte et le nom de la clé requis - et renvoie la valeur associée à la clé. C'est l'équivalent de la syntaxe $array['key'] et $object->key de PHP ou de la syntaxe object.key de JavaScript dans Sass.
Pour utiliser @each pour itérer tous les subaps et affecter leurs valeurs à des variables utiles en utilisant map-get(), nous nous retrouvons avec une boucle de 6 lignes, 220 caractères.
<code>@each $label, $map in $breakpoint-map {
$min-width: map-get($map, min-width);
$max-width: map-get($map, max-width);
$base-font: map-get($map, base-font);
$vertical-rhythm: map-get($map, vertical-rhythm);
}</code> Les listes imbriquées rendent les boucles plus efficaces. Pour les cartes, nous devons attribuer la carte aux variables de boucle dynamique, puis attribuer toutes les valeurs aux variables à l'aide de map-get(), mais pour les listes, nous pouvons rapidement attribuer toutes les valeurs aux variables.
Étant donné que chaque élément de la liste de niveau supérieur a les cinq mêmes valeurs dans le même ordre, nous pouvons immédiatement attribuer chaque valeur à une variable dynamique à utiliser dans une boucle. Avec ces variables, nous n'avons pas besoin d'attribuer des sous-valeurs aux variables disponibles en utilisant map-get(). La boucle de liste imbriquée dont nous avons besoin n'est que de deux lignes, moins de 100 caractères.
<code>@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}</code>Avertissement de liste imbriquée
Les listes imbriquées sont les principaux avantages des performances du développeur: dans l'ensemble, vous pouvez entrer moins de la moitié que vous l'avez fait lors de l'utilisation du mappage. Cependant, il y a une raison d'ajouter des cartes à SASS: ils fournissent une fonction que les listes n'ont pas: le mappage des valeurs clés.
Si vous comptez sur des listes imbriquées, vous devez être absolument sûr de savoir combien d'éléments chaque liste contiendra et la commande qu'elles sont. Voyons ce qui se passe si nous manquons un élément dans la liste:
<code>$breakpoint-map: (
small: (
min-width: null,
max-width: 479px,
base-font: 16px,
vertical-rhythm: 1.3
),
medium: (
min-width: 480px,
max-width: 959px,
base-font: 18px,
vertical-rhythm: 1.414
),
large: (
min-width: 960px,
max-width: 1099px,
base-font: 18px,
vertical-rhythm: 1.5
),
xlarge: (
min-width: 1100px,
max-width: null,
base-font: 21px,
vertical-rhythm: 1.618
)
);</code> Si nous essayons d'exécuter le code, la dernière liste se cassera. Il affectera correctement "xlarge" à $label et "1100px" à $min-width, mais il attribue ensuite "21px" à $max-width et "1.618" à $base-font, la fabrication $vertical-rhythm est vide. En conséquence, nous obtenons une déclaration de taille de police non valide et une propriété de hauteur de ligne manquante dans le dernier point d'arrêt. De plus, SASS ne rapporte pas une erreur pour cela, donc nous ne savons pas si les choses réussissent. Si nous essayons d'utiliser la largeur maximale pour les requêtes multimédias, nous nous retrouverons avec la valeur de taille de police (seulement 21px) - je pense que ce serait une largeur maximale très inutile!
Si nous utilisons MAP à la place, même si une valeur est manquante, la fonction map-get() nous donnera ce dont nous avons besoin. C'est notre compromis: la simplicité et la vitesse que nous obtenons dans la liste, nous perdons la spécificité et la prévention des erreurs dans la cartographie.
Un autre problème connexe avec l'utilisation de listes imbriquées consiste à interroger des listes spécifiques. Étant donné que la carte a des clés, vous pouvez rapidement accéder à n'importe quel submap en utilisant map-get():
<code>$breakpoint-list: ( (small, null, 479px, 16px, 1.3), (medium, 480px, 959px, 18px, 1.414), (large, 960px, 1099px, 18px, 1.5), (xlarge, 1100px, null, 21px, 1.618) );</code>
Pour obtenir des données pour les listes moyennes à partir de listes imbriquées, nous avons besoin d'une fonction plus complexe:
<code>@each $label, $map in $breakpoint-map {}</code> Cette fonction traverse toutes les listes dans $breakpoint-list, vérifie la première valeur de l'étiquette que nous voulons et renvoie la liste si une correspondance est trouvée. Si la fin de la boucle @each est atteinte sans un match trouvé, il reviendra NULL. Il s'agit essentiellement d'une interprétation maison rapide de la liste map-get(), qui utilise la première valeur comme pseudo-clé.
SASS a de nombreuses fonctions utiles pour gérer les mappages: les listes imbriquées n'existent pas dans la même fonction. Par exemple, vous pouvez utiliser map-merge() pour ajouter des paires de valeurs clés supplémentaires à la carte. Utilisez map-merge() avec des clés partagées pour mettre à jour la valeur de la clé partagée. Vous pouvez ajouter une nouvelle liste en utilisant join() ou append(), mais la fonction de mise à jour qui simule map-merge() nécessitera une autre fonction SASS personnalisée.
Une autre fonction de mappage utile est map-has-key(). Cette fonction est utile pour valider toute fonction personnalisée qui dépend de map-get(). Cependant, il n'y a pas de fonctions comparables pour la liste.
Vous pouvez utiliser des sassylistes pour simuler la fonction de mappage d'une liste. (Cette bibliothèque a fourni ces fonctions avant le support de mappage de SASS.)
Conclusion
Étant donné que les cartes utilisent des paires de valeurs clés, elles sont plus puissantes que les listes. La fonction de cartographie SASS supplémentaire fournit un moyen pratique de trouver des données et de vérifier les valeurs mappées.
Les listes SASS imbriquées peuvent être plus rapides à écrire et à maintenir, mais ils peuvent ne pas être aussi adaptés que des mappages pour la vérification des erreurs ou la requête détaillée. La plupart du temps, je pense que la cartographie est une meilleure option, bien qu'il y ait une augmentation de la verbance. Pour les petits blocs de code et de boucles à usage unique, j'utilise parfois des listes imbriquées, mais le mappage est plus adapté aux paramètres à l'échelle du projet et au stockage de données.
Avez-vous comparé les cartes et les listes imbriquées dans l'un de vos travaux, ou refactorisé le code pour hiérarchiser l'un par rapport à l'autre? Partagez votre expérience dans les commentaires!
Vous pouvez voir le code utilisé dans ce tutoriel dans ce Sassmeister Gist.
FAQ pour la cartographie SASS et les listes imbriquées (FAQ)
La cartographie SASS et les listes imbriquées sont deux outils puissants dans les préprocesseurs SASS, mais ils ont des différences évidentes. Les cartes SASS sont similaires aux tableaux associatifs dans d'autres langages de programmation, où chaque valeur est associée à une clé unique. Cela facilite la récupération, la mise à jour et la manipulation des données. D'un autre côté, les listes imbriquées sont une série de valeurs similaires aux tableaux en JavaScript. Ils sont les mieux adaptés lorsque vous devez stocker et itérer sur une gamme de valeurs, mais ils n'ont pas la possibilité d'accéder directement aux valeurs spécifiques fournies par la cartographie.
Pour utiliser la carte SASS, vous devez d'abord définir une carte avec une paire de supports, chaque paire de valeurs clés séparée par un côlon. Par exemple, $map: (key1: value1, key2: value2). Vous pouvez ensuite utiliser la fonction map-get pour accéder aux valeurs de la carte comme suit: map-get($map, key1).
Oui, vous pouvez nicher des cartes SASS comme les listes imbriquées. Ceci est particulièrement utile lorsque vous souhaitez combiner les données pertinentes ensemble. Pour accéder aux valeurs dans une carte imbriquée, vous devez utiliser la fonction map-get deux fois: map-get(map-get($map, key1), key2).
Vous pouvez itérer sur la carte SASS en utilisant la directive @each. La directive @each prend deux variables: clé et valeur. Voici un exemple: @each $key, $value in $map { … }.
La cartographie SASS présente plusieurs avantages par rapport aux listes imbriquées. Ils permettent un accès direct à des valeurs spécifiques, ce qui rend votre code plus efficace et plus facile à lire. Ils fournissent également des fonctions intégrées pour la manipulation des mappages, tels que l'ajout, la suppression et la mise à jour des paires de valeurs clés.
Oui, vous pouvez utiliser la fonction map-from-list pour convertir les listes imbriquées en cartes SASS. Cette fonction prend une liste de paires et renvoie une carte où chaque paire est une paire de valeurs clés dans la carte.
Pour utiliser des listes imbriquées dans SASS, vous devez d'abord définir une liste avec une paire de supports, chaque valeur séparée par un espace ou une virgule. Par exemple, $list: (value1, value2, value3). Vous pouvez ensuite utiliser la fonction nth pour accéder aux valeurs de la liste comme suit: nth($list, 1).
Oui, vous pouvez utiliser à la fois des listes de cartographie SASS et de listes imbriquées. Par exemple, vous pouvez utiliser des mappages pour stocker une série de listes et vice versa. Ceci est utile pour organiser des structures de données complexes.
Bien que la cartographie SASS et les listes imbriquées soient des outils puissants, ils ont certaines limites. Par exemple, la carte SASS ne peut pas avoir des clés en double et l'ordre des clés dans la carte ne peut pas être garanti. De même, si les listes imbriquées deviennent trop grandes ou trop complexes, elles peuvent être difficiles à gérer.
Le choix de l'utilisation de la carte SASS ou de la liste imbriquée dépend de vos besoins spécifiques. Si vous devez accéder directement à des valeurs spécifiques et être en mesure de manipuler des données, le mappage SASS peut être le meilleur choix. Si vous avez juste besoin de stocker et d'itérer une série de valeurs, une liste imbriquée est suffisante.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quel fichier est Windows.old ?
Quelle est la raison de l'échec de la connexion au serveur ?
utilisation de la fonction de rééchantillonnage
Comment obtenir le numéro d'entrée en Java
Quelle devise est l'USDT ?
lien du serveur émule
Comment résoudre le problème de l'impossibilité de créer un nouveau dossier dans Win7
La différence entre fprintf et printf
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
