如何在 map-get 中使用键名而不是值?
How can I use the key name instead of value in map-get?
我正在尝试创建一个函数,使我能够输出简单二维的 key name 和 key value地图 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
而不是:
海伦 age:34 sex:female
如何获取带值或不带值的键标签?
使用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}";
}
}
}
我正在尝试创建一个函数,使我能够输出简单二维的 key name 和 key value地图 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
而不是: 海伦 age:34 sex:female
如何获取带值或不带值的键标签?
使用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}";
}
}
}