map-get에서 값 대신 키 이름을 사용하려면 어떻게해야합니까?

Question

는 단순히 출력에 나를 수있는 기능을 만들려고하고있는 키 이름과 CSS의 단순한 2 차원지도의 키 값 :

$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 성별 : 여성

가 어떻게이를 얻을 수 있습니다 난 단지 값, 다음하지 키를 읽을 수 있습니다 값이 있거나없는 키 레이블?

Answer 1

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}"; 
     } 

    } 

}