How can I use the key name instead of value in map-get?
<p>I am trying to create a function that simply enables me to output the <em>key name</em> and <em>key value</em> of a simple two-dimensional map in CSS:</p>

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

<p>I am creating a simple function to retrieve this information:</p>

<pre><code>@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;

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

        &amp;:after {
            content: $sex;
        }

    }

}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="Hellen"&gt;&lt;/div&gt;
</code></pre>

<p>But I can't find any information that will out both the key and value as separate objects. I can only read the value, not the key with the following:</p>

<pre><code>$age: map-get($person-details, 'age');
</code></pre>

<p>result: </p>

<pre><code>Hellen 34 female
</code></pre>

<p>instead of:
   Hellen age:34 sex:female</p>

<p>How can I get the key label with or without the value?</p>