Css Sass-什么'；map get和简单变量之间的区别是什么？

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

然后在课堂上使用它，如下所示：

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

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

另一种方法是使用：

$color-black: #000000;

然后你就这样使用它：

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

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

我的问题是，哪种选择更好？或者

map get

函数还有其他用途吗？、Sass对此有一个模式还是取决于每个web开发人员

谢谢你帮了我的忙

---

注意。

不同之处在于，当您使用$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

// 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输出

.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:）的一个案例用法

---

希望这能帮助您

map get用于从更多类型的对象获取css值

假设您有$param，您在其中定义了多个属性，现在要分配。您可以通过以下方式使用它-

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

除此之外，简单变量只包含一个值

map get从包含多个值的对象获取css值 用于保存单个值的变量

---

使用带有回退颜色的css变量制作主题的示例 看

---

既然两者都可以，为什么还要挑一个呢

_变量.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文件中，并在需要循环时使用列表，在应用样式时使用变量进行速记。

它们都生成相同的CSS，因此这更像是一个首选项。但是，如果您正在设置每个边框边颜色的样式，会发生什么？例如，

.border color{map get（$colors，color1）；map get（$colors，color2）；map get（$colors，color3）；map get（$colors，color4）；}

这不是效率低下吗？@Alex-你应该把它包装在一个SASS实用程序函数中，这个函数是特定于颜色的，以避免像你输入的代码那样混乱。如果map没有键（$map，$icon name），不是

@吗{

有点多余吗？@goonerify现在可能是这样，一些编译器抱怨如果你试图用错误的键使用$map变量，其他人就会忽略整行。所以我添加了一个终端警告。没有必要