Sass - map-get 和简单变量有什么区别？

Question

我是 Sass 的新手，我一直在阅读有关使用变量的不同方法，我尝试应用的这个原则仅适用于颜色，我发现的一些解决方案是这样的（map-get） ：

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

然后你像这样在你的课堂上使用它：

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

另一种方法是使用：

 $color-black: #000000;

然后你像这样使用它：

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

我的问题是，哪个选项更好？或 map-get 函数有其他用途吗？Sass 是否为此提供了模式，或者它取决于每个 Web 开发人员？

谢谢你的协助！。

问候。

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不同之处在于，当您使用 $map 变量时，它们最好设计用于通过迭代或使用 @each。

示例案例：

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

// 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: "";
}

此代码取自我自己在 以下帖子 中的答案，但答案是 @each 的一个案例使用:)

希望这对你有帮助

原文由 Héctor León 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当你可以同时拥有它们时，为什么要选择一个。

_variables.scss

 $color0 : white;
$color1 : red;
$color2 : green;
$color3 : blue;

_lists.scss

 @use "variables";
@use "sass:map";
@use "sass:meta";
@use "sass:list";

@function dynamic($variable){
    $i: 0;
    $list: ();
    @while(variable-exists($variable + $i)){
        $list: list.append($list, map.get(meta.module-variables(variables), $variable + $i));
        $i: $i + 1;
    }
    @return $list;
}

$colors: dynamic('color'); // white red green blue

将两者都导入您的 scss 文件并在需要循环时使用列表，在应用样式时使用速记变量。

原文由 Mike Mellor 发布，翻译遵循 CC BY-SA 4.0 许可协议