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

Question

我是 Sass 的新手，我一直在阅读有关使用变量的不同方法的信息，我尝试应用的这个原则仅适用于颜色，我发现的一些解决方案是这样的（地图-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-getfunction 有其他目的？Sass 是否有此模式，或者它取决于每个 Web 开发人员？

感谢您帮助我！

问候。

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

这段代码取自我自​​己在the following post 中的回答，但答案是@each 的一个案例使用:)

希望对你有帮助

Answer 2

map-get 用于从更多种类的对象中获取 css 值。

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

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

简单的变量只保存一个值

map-get 从拥有多个值的对象中获取 css 值，而 保存单个值的变量

Answer 3

使用带有后备颜色的 css 变量制作主题的示例 见codepen css variables

// VARS (FOR FALLBACK)
// -------------------
$theme-base: #70c1ac;
$theme-base-aa: adjust-color($theme-base, $blue: 125);

// PROCESSED THEME
$theme-color: $theme-base;
$theme-color-dark: darken($theme-color, 20%);
$theme-color-light: lighten($theme-color, 20%);
$theme-color-mixed: mix(#fff, $theme-color, 75%);
$theme-color-trans: transparentize($theme-color, .4);

// PROCESSED SECONDARY
$theme-color-aa: $theme-base-aa;
$theme-color-aa-dark: darken($theme-color-aa, 20%);
$theme-color-aa-light: lighten($theme-color-aa, 20%);
$theme-color-aa-mixed: mix(#fff, $theme-color-aa, 75%);
$theme-color-aa-trans: transparentize($theme-color-aa, .4);

$theme-colors: (
  "aa-dark": $theme-color-aa-dark,
  "aa-light": $theme-color-aa-light,
  "aa-mixed": $theme-color-aa-mixed,
  "aa-trans": $theme-color-aa-trans,
  aa: $theme-color-aa,
  dark: $theme-color-dark,
  light: $theme-color-light,
  mixed: $theme-color-mixed,
  theme: $theme-color,
  trans: $theme-color-trans,
);

@mixin themeColor ($prop, $color: null) {
  @if ($color) {
    #{$prop}: map-get($theme-colors, $color);
    #{$prop}: var(--theme-color-#{$color})
  } @else {
    #{$prop}: map-get($theme-colors, theme);
    #{$prop}: var(--theme-color);
  }
}

@mixin setThemeColors($base1: "", $base2: "") {
  // BASE THEME COLORS
  $color-base: $theme-base;
  $color-aa: $theme-base-aa;

  @if ($base1) {
    $color-base: $base1;
    $color-aa: $base2;
  }

  // PROCESSED THEME COLORS
  $color-aa-dark: darken($color-aa, 20%);
  $color-aa-light: lighten($color-aa, 20%);
  $color-aa-mixed: mix(#fff, $color-aa, 75%);
  $color-aa-trans: transparentize($color-aa, .5);
  $color-aa: $color-aa;
  $color-dark: darken($color-base, 20%);
  $color-light: lighten($color-base, 20%);
  $color-mixed: mix(#fff, $color-base, 75%);
  $color-trans: transparentize($color-base, .5);

  // CSS VARIABLES
  --theme-color-aa-dark: #{$color-aa-dark};
  --theme-color-aa-light: #{$color-aa-light};
  --theme-color-aa-trans: #{$color-aa-trans};
  --theme-color-aa: #{$color-aa};
  --theme-color-dark: #{$color-dark};
  --theme-color-light: #{$color-light};
  --theme-color-mixed: #{$color-mixed};
  --theme-color-trans: #{$color-trans};
  --theme-color: #{$color-base};
}

:root {
  @include setThemeColors($theme-base, $theme-base-aa);
}

body {
  @include themeColor("background","mixed");
  font-size: 2rem;
}

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  @include themeColor("color","dark");

  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1.2em; /* Also needed for space (tweak if needed) */
  margin-left: -.8em; /* Also needed for space (tweak if needed) */
}

li {
  @include themeColor("color", "light");
  @include themeColor("background", "aa-dark");
}

Answer 4

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

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