Map 数据类型

约 697 字大约 2 分钟

2025-04-05

Sass Map 是一种高级数据结构，用于存储 键值对（key-value pairs），类似于 JavaScript 的 Object 或 Python 的 dict。它非常适合管理复杂的数据集合（如主题配置、断点、颜色系统等），并可以通过 Sass 的内置函数和循环动态操作数据。

一、基本语法

Map 使用 () 定义，键值对用逗号分隔，键和值用 : 分隔：

$map: (
  key1: value1,
  key2: value2,
  key3: value3,
);

示例

// 定义颜色主题
$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f1c40f,
);

// 定义响应式断点
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px,
);

二、Map 操作

1、访问 Map 的值

使用 map-get($map, $key) 函数获取值：

.button {
  background-color: map-get($theme-colors, primary);
}

// 编译结果：
.button {
  background-color: #3498db;
}

2、常用 Map 函数

Sass 提供了一系列内置函数操作 Map：

函数	作用	示例	编译结果
`map-get($map, $key)`	获取键对应的值	`map-get($theme-colors, primary)`	`#3498db`
`map-merge($map1, $map2)`	合并两个 Map	`map-merge((a:1), (b:2))`	`(a:1, b:2)`
`map-remove($map, $keys...)`	移除指定键	`map-remove($theme-colors, danger)`	移除 `danger` 键
`map-keys($map)`	获取所有键的列表	`map-keys($theme-colors)`	`primary, secondary, ...`
`map-values($map)`	获取所有值的列表	`map-values($theme-colors)`	`#3498db, #2ecc71, ...`
`map-has-key($map, $key)`	检查键是否存在	`map-has-key($theme-colors, primary)`	`true`

3、遍历 Map

通过 @each 循环遍历 Map，动态生成 CSS 规则：

// 生成不同颜色的按钮类
@each $name, $color in $theme-colors {
  .button-#{$name} {
    background-color: $color;
    border: 1px solid darken($color, 10%);
  }
}

// 编译结果：
.button-primary { ... }
.button-secondary { ... }
// ...其他按钮类

4、嵌套 Map

Map 可以嵌套，用于管理更复杂的数据结构：

$config: (
  theme: (
    light: (
      background: #fff,
      text: #333,
    ),
    dark: (
      background: #222,
      text: #fff,
    ),
  ),
  breakpoints: (
    mobile: 480px,
    desktop: 1024px,
  ),
);

// 获取嵌套值
$dark-text: map-get(map-get(map-get($config, theme), dark), text);

三、实际应用场景

场景 1：主题系统

$themes: (
  light: (
    bg: #fff,
    text: #333,
  ),
  dark: (
    bg: #222,
    text: #fff,
  ),
);

@mixin theme($theme-name) {
  $theme: map-get($themes, $theme-name);
  background-color: map-get($theme, bg);
  color: map-get($theme, text);
}

body.dark-mode {
  @include theme(dark);
}

场景 2：响应式断点

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
);

@mixin respond-to($breakpoint) {
  $width: map-get($breakpoints, $breakpoint);
  @media (min-width: $width) {
    @content;
  }
}

.sidebar {
  @include respond-to(tablet) {
    width: 250px;
  }
}

四、注意事项

不可变性：Map 的操作（如 map-merge 或 map-remove）会返回新 Map，原 Map 不会被修改。
键唯一性：键必须是唯一的，重复键会覆盖之前的定义。
键类型：键可以是任何 Sass 数据类型（包括字符串、数字、颜色等），但通常使用字符串或符号（如 primary）。

通过 Sass Map，你可以将分散的变量组织成结构化数据，显著提升代码的可维护性和可扩展性。这在管理大型项目或复杂设计系统时尤其有用！

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24