Share
Sass Maps est une bénédiction pour les interfaces frontales évolutives. Extraire la configuration de la logique d’un module est une excellente méthode de structuration. Laissez-moi vous expliquer pourquoi je pense que Sass Maps est la meilleure fonctionnalité de Sass 3.3..
Sass 3.3 est à la portée de tous depuis un certain temps déjà, mais bon nombre de ses fonctionnalités réelles ne sont toujours pas connues de nombreux développeurs. La nouvelle version de Sass nous a apporté un nouveau type de données nommé carte. Les cartes contiennent un ensemble de paires clé / valeur et nous aident à créer de petites zones de configuration pour une base de code simplifiée..
Pour être avec, nous couvrirons les bases de l’utilisation de Sass Maps, puis nous examinerons plus tard quelques cas d’utilisation..
Voici un aperçu rapide de la syntaxe pour une carte impertinente. Commencez avec un nom de variable ($ carte dans ce cas) puis entrez des clés avec des valeurs, séparées par des virgules, le tout entre accolades:
$ map: (clé: valeur, clé suivante: valeur suivante);
Après avoir stocké plusieurs paires clé / valeur à un moment donné, vous devrez récupérer ces informations. Si vous avez besoin de trouver la valeur d'une clé, utilisez la fonction map-get (). Nous allons lui passer deux paramètres: le nom de la carte puis la clé.
.element: before contenu: map-get ($ map, key);
Une fois compilé, le résultat sera le suivant:
.élément: before contenu: valeur;
Il est vivement recommandé d'utiliser une gestion des erreurs solide dans votre processus de développement Sass. Pour cela, Sass nous donne la fonction map-has-key (). Cette aide vérifie si une clé existe et, si ce n’est pas le cas, fournit une autre sortie pour avertir le développeur.
Jetez un coup d’œil à cette introduction à la gestion des erreurs dans Sass de Hugo Giraudel pour un moyen formidable de gérer les erreurs..
$ map: (clé: valeur, clé suivante: valeur suivante); .element @if map-has-key ($ map, key) content: 'La carte a cette clé.'; @else content: 'La carte n'a pas cette clé.';
Résultat:
.element content: 'La carte a cette clé.';
Bonus time: Sass nous permet de fusionner deux cartes ou plus. Vous comprenez cela maintenant, alors jetez un oeil à cet exemple d'utilisation de la fusion de carte () une fonction:
$ couleurs: (clair: #ccc, foncé: # 000); $ couleurs de marque: (principal: rouge, alternative: bleu); // Fusionner les cartes $ merged: map-merge ($ colors, $ brand-colors); .element content: map-get ($ merged, alternative);
Le résultat:
.élément contenu: bleu;
Nous avons couvert le Comment, maintenant regardons le où.
Les cartes peuvent également être utiles sans les fonctions associées. Par exemple, vous pouvez effectuer une boucle sur votre carte, définir les paramètres avec les valeurs attendues, puis ajouter le nom de la carte Sass. En faisant cela, il est possible de travailler avec différents types de valeurs.
Dans cet exemple, je sors des classes pour afficher des icônes. J'ai mis le prénom de l'icône en tant que clé, laissant la valeur pour stocker le réel contenu (que nous ajouterions ensuite via des pseudo-éléments).
Remarque: Dans un scénario réel, nous déclarons d’abord certains styles de base, mais cela dépasse le cadre de ce tutoriel..
/ * Définit la carte Sassy appelée $ icons * / $ icons: (coche: a, plus: b, moins: c); / * Pour chaque clé de la carte, créé sa propre classe * / @ chaque $ nom, $ valeur dans $ icônes .icon - # $ nom contenu: $ valeur;
La sortie parle d'elle-même:
/ * Pour chaque clé de la carte, création d'une classe propre * / .icon - checkmark content: "a"; .icon - plus content: "b"; .icon - minus contenu: "c";
C'est un moyen très efficace de générer des charges de classes pour les icônes. Il y a beaucoup d'autres cas d'utilisation aussi, examinons certains.
En passant, il est possible de donner à une clé plus d'une valeur. Pour cela, utilisez des coupures et entrez plusieurs valeurs avec un séparateur de virgule. Cela pourrait, par exemple, être intéressant pour transférer des styles pour des variantes d'un module.
Ici, je vais styler une série de boutons. La première valeur pour chaque clé est pour le Couleur de fond et le second est pour le couleur de la police.
Puis je passe en revue les clés avec l'objet attendu $ couleurs. Je reçois la valeur de la première clé dans cet objet avec nième ($ couleurs, 1) (commencez par le nom de l'objet puis par la position de la valeur recherchée). Si vous avez besoin de la deuxième valeur, vous devez entrer 2.
// _m-buttons.scss $ boutons: (erreur: (# d82d2d, # 666), succès: (# 52bf4a, #fff), avertissement: (# c23435, #fff)); .m-button display: inline-block; rembourrage: .5em; arrière-plan: #ccc; couleur: # 666; @each $ name, $ colors in $ buttons $ bgcolor: nth ($ colors, 1); $ fontcolor: nth ($ colors, 2); & - # $ name background-color: $ bgcolor; couleur: $ fontcolor;
Le résultat:
.bouton m display: inline-block; rembourrage: .5em; arrière-plan: #ccc; couleur: # 666; .m-button - erreur background-color: # d82d2d; couleur: # 666; .m-button - success background-color: # 52bf4a; couleur: #fff; .m-button - avertissement background-color: # c23435; couleur: #fff;
Je ne connais pas un seul développeur front-end qui n'ait jamais lutté contre z-index. Les problèmes surviennent généralement lorsque vous perdez un aperçu si vous devez utiliser z-index à plusieurs endroits dans un projet. Les cartes Sass peuvent nous aider.
Commençons avec couche $ comme la carte. Les clés doivent avoir un nom logique pour que vous sachiez quelle valeur correspond à quel élément - peut-être offcanvas, boite à lumière, menu déroulant etc.
// _config.scss $ layer: (offcanvas: 1, lightbox: 500, dropdown: 10, info-bulle: 15); // couche _f-lightboxes.scss @function ($ name) @if map-has-key ($ layer, $ name) @return map-get ($ layer, $ name); @warn "La clé # $ name n'est pas dans la carte '$ layer'"; @retour null; ; .m-lightbox z-index: couche (lightbox);
Ici, j'ai écrit une fonction pour obtenir la valeur d'une clé spécifique, mais pourquoi ai-je fait cela? La réponse est heureusement simple: c'est plus rapide que d'écrire map-get () chaque fois. Un autre aspect positif est que vous pouvez créer une gestion des erreurs et donner au développeur un petit retour d’informations sur les raisons pour lesquelles rien ne se passe..
C'est la sortie:
.m-lightbox z-index: 500;
Chaque projet a son propre fichier de configuration. bases pour une utilisation globale. Par exemple, dans mes projets, je définis certaines valeurs pour les propriétés de police: police-couleur, couleur alternative, police-famille ou taille de police. J'avais l'habitude de créer une variable pour chaque propriété, mais une carte serait mieux.
Voici un exemple rapide, pour commencer par le vieux Solution:
$ base-font-color: # 666; $ base-font-family: Arial, Helvetica, Sans-Serif; $ base-font-size: 16px; $ hauteur de ligne de base: 1,4;
Puis le Nouveau solution utilisant une carte Sass:
// _config.scss $ font: (color: # 666, famille: (Arial, Helvetica), taille: 16px, hauteur de trait: 1.4); // _presets.scss body color: map-get ($ font, color); font-family: map-get ($ font, famille); taille de police: map-get ($ font, size); hauteur de ligne: map-get ($ font, line-height);
J'adore ce cas d'utilisation. C'est superbe d'avoir une zone pour les points d'arrêt qui sont dans tout votre projet. Ainsi, comme dans la section sur la gestion avec z-index, vous avez une vue d'ensemble de tous les points d'arrêt utilisés. Si vous modifiez la valeur à cet endroit, vous modifiez le comportement tout au long de votre projet. Impressionnant.
Commençons donc avec une carte appelée points d'arrêt.
Notre objectif est d'utiliser des points d'arrêt avec des noms implicites au lieu des valeurs de pixels durs dans un élément. Pour cette raison, nous avons besoin d'un mix qui produira la valeur du nom indiqué. J'ai appelé le mixin répondre à et passe $ point d'arrêt en paramètre. Avec $ valeur Je reçois la valeur du point d'arrêt attendu et le pose plus tard dans la requête du média.
// Carte avec beaucoup de points d'arrêt $ points d'arrêt: (petit: 320px, moyen: 600px, grand: 768px); // Répondre à Mixin @mixin répondre à ($ point d'arrêt) @ si map-has-key ($ points d'arrêt, $ point d'arrêt) $ value: map-get ($ points d'arrêt, $ point d'arrêt); écran @media et (largeur-min: valeur $) @content; @warn "Inconnu '# $ breakpoint' dans $ breakpoints";
Exemple:
// Sass .m-tabs background-color: # f2f2f2; @include respond-to (medium) background-color: # 666; // Sortie .m-tabs background-color: # f2f2f2; @ Écran multimédia et (largeur minimale: 600 pixels) couleur de fond: # 666;
Ce cas d'utilisation est l'un de mes favoris!
Les choses deviennent un peu plus difficiles maintenant. Regardons cartes imbriquées-génial pour les combinaisons de couleurs avec une gamme de tons.
Notre carte Sass dans ce cas porte le nom $ colorscheme et il a des objets avec des clés et des valeurs. Le projet a des tons de gris différents, mais nous ne voulons pas déclarer une variable pour chacun. Donc on ajoute un objet gris, ajouter des coupures, puis les clés avec des valeurs.
Commencez avec une carte comme celle-ci:
// Modèle de couleurs $ colorscheme: (gris: (base: #ccc, clair: # f2f2f2, sombre: # 666), brun: (base: # ab906b, clair: # ecdac3, foncé: # 5e421c));
Ajoutons maintenant la fonction setcolor pour un moyen plus court d'obtenir notre couleur de choix. La première valeur attendue est l’objet de la carte Sass (régime $) - dans cet exemple, il pourrait être gris ou marron. Le deuxième paramètre est la couleur que vous voulez ($ ton) - la valeur par défaut pour cela étant la clé base.
// Notre fonction pour une utilisation plus courte de map-get (); @function setcolor ($ scheme, $ tone: base) @return map-get (map-get ($ colorscheme, $ scheme), $ tone);
Enfin, voici un exemple d'utilisation et d'utilisation des différentes couleurs de la carte imbriquée. C'est plus facile que vous ne le pensez (peut-être)!
// Sass .element color: setcolor (brown); .element - light color: setcolor (marron, lumière); // Sortie .element color: # ab906b; .element - light color: # ecdac3;
Vous avez terminé le défi. Maintenant, vous pouvez créer une palette sans gonfler votre code avec trop de variables pour chaque type de couleur.
Pour cette technique, Tom Davies m'a inspiré et je vous recommande de consulter son article sur le sujet..
Maintenant, quelque chose pour les utilisateurs avancés de Sass. Dans les projets, il est souvent nécessaire de créer différents types de thèmes avec le même code. Voici donc une proposition visant à définir une classe de thèmes en haut du document pour appliquer un aspect spécifique. Nous avons besoin d'un objet où nous pouvons gérer le nom des thèmes et définir les différents styles pour le module..
Commencez avec une carte Sass et définissez les thèmes globaux pour votre projet. La valeur est le nom et la classe, que vous devez ajouter à la élément. Dans cet exemple j'ai créé la carte $ thèmes avec deux variantes: thème lumière et thème sombre.
// _config.scss $ themes: (theme1: theme-light, theme2: theme-dark);
Nous avons maintenant besoin d’une fonction permettant d’obtenir rapidement les valeurs des modules. C'est une aide brève qui nécessite trois paramètres. Ceux-ci sont:
Accentsconagua
$ carte: Définit le nom de la carte d'où proviennent toutes les valeurs.$ object: Dans ce cas, la clé du thème.$ style: La propriété pour le style qui est nécessaire.// _functions.scss @function setStyle ($ map, $ object, $ style) @if map-has-key ($ map, $ object) @return map-get (map-get ($ map, $ object) , $ style); @warn "La clé '# $ objet n'est pas disponible dans la carte."; @retour null;
Créez maintenant une nouvelle carte Sass appelée $ config. Chaque thème reçoit un objet et le nom doit être la même clé que celle définie dans $ thèmes: sinon vous aurez une erreur.
// _m-buttons.scss // 1.Config $ config: (theme1: (background: # f2f2f2, color: # 000), theme2: (background: # 666, color: #fff));
Enfin la partie avec un peu de magie. Nous commençons avec un module comme .bouton m et ensuite, nous voulons créer un look différent dans chaque thème. Donc nous utilisons @chaque avec clé $ et $ valeur comme prévu les valeurs que nous obtenons de la carte $ thèmes. Maintenant, Sass parcourt les clés de la carte et crée quelque chose pour chaque thème..
Au début de cette section, j’ai mentionné qu’il était nécessaire que les clés soient les mêmes dans chaque carte ($ thèmes et $ config). Il faut donc vérifier si la carte $ config a la clé de la carte $ thèmes, alors utilisez la fonction map-has-key (). Si la clé est disponible, procédez comme suit, sinon émettez une erreur pour en informer le développeur..
// _m-buttons.scss // 2.Base .m-button @ chaque $ clé, $ valeur dans $ themes @if carte-has-key ($ config, $ key) . # $ valeur & background: setStyle ($ config, $ key, background); couleur: setStyle ($ config, $ key, color); @else @warn "La clé '# $ key n'est pas définie dans la carte $ config'"
Après tout le code écrit, examinons le résultat. C'est superbe que la zone de configuration soit séparée de la logique du module.
.thème-lumière .m-button background: # f2f2f2; couleur: # 000; .theme-dark .m-button background: # 666; couleur: #fff;
Enfin, il est temps d'essayer par vous-même. Peut-être que cette solution ne fonctionne pas pour vous et que vous en avez besoin d'une autre, mais dans l'ensemble, j'espère que cela vous aidera à bien gérer votre code. Vous pouvez jouer avec cet exemple sur Codepen:
À mes yeux, Sass Maps était la meilleure fonctionnalité à introduire dans Sass 3.3. Personnellement, j'estime qu'ils constituent un excellent moyen de mieux structurer votre fondation et de créer de petites zones de configuration. Les cartes Sass facilitent le traitement et la modification des valeurs sans affecter la logique de la base de code entière. Commencez à les utiliser aujourd'hui, vos collègues vous en seront reconnaissants!
Si vous utilisez déjà des cartes Sass, indiquez-nous comment vous les utilisez dans vos projets.!
