css - SASS - 访问多维数组的值

Question

我是 SASS 的新手。我创建了一个多维数组，如下所示:

$content: (
    width: 100%,
    content-header: (
        width: 320px
    ),
    content-main: (
        width: 100%
    ),
    content-footer: (
        width: 320px
    )
);

如何直接访问嵌套的数组值？

我想访问$content-main[width]。我怎样才能访问？

Answer 1

你让这比它需要的要难得多。如果您需要遍历变量，数组很有用，您需要为此创建自己的 sass 函数，它使用 map-get。我强烈建议只使用更简单、更便携的命名空间变量，例如$content-width $content-main-width.

如果您真的想这样做，请参阅 https://css-tricks.com/snippets/sass/deep-getset-maps/

/// Map deep get
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

map-deep-get($content, "content-header", "width");