6

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

代わりに: ヘレン 年齢:34 性別:女性

値の有無にかかわらずキーラベルを取得するにはどうすればよいですか?

4

1 に答える 1

14

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

    }

}
于 2016-06-13T14:37:06.277 に答える