Wie kann ich den Schlüsselnamen anstelle von Wert in map-get verwenden?

Question

Ich versuche, eine Funktion zu erstellen, die mich einfach die zur Ausgabe ermöglicht Schlüsselnamen und Schlüsselwert eine einfachen zweidimensionalen Karte in CSS:

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

Ich bin eine einfache Funktion zu schaffen abrufen diese Informationen:

@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> 

Ich kann jedoch keine Informationen finden, die sowohl den Schlüssel als auch den Wert als separate Objekte ausgeben. Ich kann nur den Wert lesen, den Schlüssel nicht mit dem folgenden:

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

Ergebnis:

Hellen 34 female 

statt: Hellen Alter: 34 Geschlecht: weiblich

Wie kann ich das bekommen Tastenbeschriftung mit oder ohne Wert?

Answer 1

Verwenden Sie map-keys(), um alle Schlüssel in der Liste zu erhalten.

Probe:

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

    } 

}