web-dev-qa-db-fra.com

Sass - Quelle est la différence entre map-get et simple variable?

Je suis nouveau dans Sass et je lis différentes méthodes d’utilisation des variables. Ce principe que je tente d’appliquer concerne uniquement les couleurs. Certaines des solutions que j’ai trouvées ressemblaient à ceci (map-get) :

$colors: (
    lighestGray: #F8F8FA,
    lightGray: #A5ACBA,
    light: #FFFFFF,
    dark: #000000,
    link: #428bca,
    linkHover: #555,
    navBlue: #7AC243,
    navGreen: #009CDC,
);

Ensuite, vous l'utilisez sur votre classe comme ceci:

.my-class {
    color: map-get($colors, dark);
}

Et l'autre moyen est d'utiliser:

$color-black: #000000;

Ensuite, vous l'utilisez comme ceci:

.my-class {
    color: $color-black;
}

Ma question est, quelle option est la meilleure? ou map-getfunction a un autre objectif?, Sass a un modèle pour cela ou cela dépend de chaque développeur Web?.

Merci de m'avoir aidé!.

Cordialement.

csssass
10
Alex

La différence est que lorsque vous utilisez les variables $ map, elles sont mieux conçues pour être utilisées via des itérations ou à l'aide de @each. 

Cas d'échantillon:

SCSS

// Map variable
$icons: (
  facebook   : "\f0c4",
  Twitter    : "\f0c5",
  googleplus : "\f0c6",
  youtube    : "\f0c7"
);

// Mixin doing the magic
@mixin icons-list($map) {
  @each $icon-name, $icon in $map {
    @if not map-has-key($map, $icon-name) {
      @warn "'#{$icon-name}' is not a valid icon name";
    }

    @else {
      &--#{$icon-name}::before {
        content: $icon;
      }
    } 
  }
}

// How to use it
.social-link {
    background-color: grey;
    @include icons-list($icons);
}

CSS

// Sortie CSS

.social-link {
  background-color: grey;
}
.social-link--facebook::before {
  content: "";
}
.social-link--Twitter::before {
  content: "";
}
.social-link--googleplus::before {
  content: "";
}
.social-link--youtube::before {
  content: "";
}

Ce code provient de ma propre réponse dans le post suivant mais la réponse est une utilisation de cas de @each :)

J'espère que cela vous aidera

19
Héctor León

map-get est utilisé pour obtenir la valeur CSS d'un plus grand nombre d'objets.

supposons que vous ayez $ param où vous avez défini plusieurs propriétés et que vous voulez maintenant assigner. vous pouvez l'utiliser de différentes manières -

color: map-get($params, "color");

Où d'autre variable simple ne contient qu'une seule valeur

map-get pour obtenir la valeur css d'un objet contenant plusieurs valeurs alors que variable pour une seule valeur

0
Samyak Jain