Как я могу использовать имя ключа вместо значения в 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

вместо: эллин возраст: 34 пол: женский

Как я могу получить метку ключа со значением или без него?


sass scss-lint
person HGB    schedule 11.06.2016    source источник
comment
попробовать map-keys()?   -  person twxia    schedule 13.06.2016
comment
Он до сих пор не показывает мне, как получить имя ключа $ вместо значения. Я смотрю здесь: map-keys ((foo: 1 , bar: 2)) = ›foo, bar   -  person HGB    schedule 13.06.2016
comment
map-keys() вернет ключевые строки. Что означает $ key name? Вы имеете в виду, что хотите получить строку имени переменной?   -  person twxia    schedule 13.06.2016
comment
Как и выше. Я хочу иметь возможность определять возраст и пол с их ценностями или без них.   -  person HGB    schedule 13.06.2016
comment
Я отвечу на него ниже. ты имеешь в виду, как это?   -  person twxia    schedule 13.06.2016

Ответы (1)


arrow_upward
12
arrow_downward

используйте 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}";
        }

    }

}
person twxia    schedule 13.06.2016
comment
Привет, спасибо, что сработало, я не понимал, что вы можете сложить их таким образом. Я разговариваю по телефону, но считаю, что есть способ сделать это более динамичным, например, @mixin person-details ($ person-name, $ key); - person HGB; 13.06.2016