Sass Map 函数

Map 是 Sass 中非常强大且灵活的数据结构。它们允许您将一组键值对存储在一起，并通过键来访问这些值。Sass 提供了多种内置函数来操作和处理 map。

创建 Map

创建一个 map 非常简单，只需将键值对放入一对大括号中即可。每个键值对由冒号分隔：

$colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745,
    danger: #dc3545
);

获取 Map 中的值

您可以使用 map-get 函数从 map 中获取值。该函数需要两个参数：map 和键名。如果键不存在，则返回 null。

$primary-color: map-get($colors, primary);
$nonexistent-key: map-get($colors, nonexistent); // 返回 null

检查 Map 中是否包含某个键

使用 map-has-key 函数检查 map 是否包含特定的键：

$is-primary-exists: map-has-key($colors, primary); // true
$is-nonexistent-exists: map-has-key($colors, nonexistent); // false

向 Map 添加或更新键值对

使用 map-merge 函数可以向现有 map 添加新的键值对，或者更新已有的键值对。如果键已经存在，那么这个键的值会被替换。

// www.javascriptcn.com code example
$new-colors: map-merge(
    $colors,
    (warning: #ffc107)
);

$updated-colors: map-merge(
    $colors,
    (primary: #0056b3)
);

删除 Map 中的键值对

虽然没有直接删除键值对的函数，但可以通过组合使用 map-remove 和 map-keys 来实现。首先，使用 map-keys 获取所有的键，然后使用 remove 函数移除不需要的键，最后使用 zip 和 index 函数构建一个新的 map。

$all-keys: map-keys($colors);
$keys-to-remove: ("secondary", "danger");
$remaining-keys: remove($all-keys, $keys-to-remove...);
$new-map: zip($remaining-keys, map-values($colors, $remaining-keys));

遍历 Map

遍历 map 可以使用 @each 循环。在循环体内，您可以分别访问键和值。

@each $key, $value in $colors {
    .color-#{$key} {
        color: $value;
    }
}

Map 的嵌套

Sass 允许在 map 中嵌套其他 map，从而创建复杂的层次结构。这使得您可以更方便地组织和管理数据。

// www.javascriptcn.com code example
$design-system: (
    typography: (
        font-sizes: (
            small: 14px,
            medium: 16px,
            large: 18px
        ),
        font-families: (
            sans-serif: 'Arial',
            serif: 'Times New Roman'
        )
    ),
    spacing: (
        padding: (
            small: 8px,
            medium: 16px,
            large: 24px
        ),
        margin: (
            small: 8px,
            medium: 16px,
            large: 24px
        )
    )
);

// 访问嵌套 map
$small-font-size: map-get(map-get($design-system, typography), font-sizes, small);
$medium-margin: map-get(map-get($design-system, spacing), margin, medium);

Map 的合并与覆盖

当您需要合并两个或多个 map 并覆盖某些键时，map-merge 是一个非常有用的工具。它会按照顺序处理输入的 map，如果遇到相同的键，后面的值会覆盖前面的值。

// www.javascriptcn.com code example
$base-settings: (
    background-color: #ffffff,
    text-color: #333333
);

$override-settings: (
    background-color: #f0f0f0,
    border-color: #cccccc
);

$final-settings: map-merge($base-settings, $override-settings);

总结

以上介绍了如何在 Sass 中使用 map，包括创建、获取、添加、删除、遍历以及处理嵌套 map 的方法。Map 是一种非常强大的数据结构，能够帮助您更好地组织和管理 CSS 变量和其他配置信息，提高代码的可维护性和复用性。熟练掌握 map 的使用，将大大提升您的 Sass 编程能力。