sass - 如何在Map-get中使用键名而不是值？

我正在尝试创建一个函数，该函数仅使我能够在CSS中输出简单的二维映射的键名和键值:

$people: (
    "Hellen": (
        age: "34",
        sex: "female"
    ),
    "Patrick": (
        age: "23",
        sex: "male"
    ),
    "George": (
        age: "10",
        sex: "male"
    ),
    "Vicky": (
        age: "19",
        sex: "female"
    )
);

我正在创建一个简单的函数来检索此信息:

@each $person-name, $person-details in $people {
    $age: map-get($person-details, 'age');
    $sex: map-get($person-details, 'sex');

    .#{$person-name} {

        height: 100 px;
        width: 100 px;
        background: #FF3C00;
        margin: 0 auto;

        &:before {
            content:$person-name " " + $age " ";
        }

        &:after {
            content: $sex;
        }

    }

}

HTML:

<div class="Hellen"></div>

但是我找不到将键和值都作为单独对象显示的任何信息。我只能读取值，不能读取带有以下内容的键:

$age: map-get($person-details, 'age');

结果:

Hellen 34 female

代替:
Hellen年龄:34性别:女

如何获得带有或不带有值的 key 标签？

最佳答案

使用map-keys()获取列表中的所有键。

样本:

@each $person-name, $person-details in $people {
    $age: map-get($person-details, 'age');
    $sex: map-get($person-details, 'sex');
    $keys: map-keys($person-details);

    .#{$person-name} {

        height: 100 px;
        width: 100 px;
        background: #FF3C00;
        margin: 0 auto;

        &:before {
            content:"#{$person-name}  #{nth($keys, 1)} : #{$age} ";
        }

        &:after {
            content: "#{nth($keys, 2)}: #{$sex}";
        }

    }

}

关于sass - 如何在Map-get中使用键名而不是值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37763601/