web-dev-qa-db-ja.com

複数の変数を持つSass @ each

私はSassとCompassを使い始めたばかりで、それが大好きです。私がやりたいことは、@each関数を利用して反復的なタスクを単純化することです。ただし、@eachが1つの変数を挿入する例しか見たことがないので、複数の変数を使用できるようにしたいと思います。

標準的な方法（ Sassリファレンス から）：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

これは素晴らしいことですが、次のようなことができるようにしたいと思います。

@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} {
  .#{$animal}-icon {
    background-color: #{$color};
  }
}

これは可能ですか？

csssasscompass-sass
24
steve

私は同じボート（Sass/Compassの初心者）にいて、同じようなことをしなければなりませんでした。ネストされたリストを使用して、私が思いついたものは次のとおりです。

$flash_types: (success #d4ffd4) (error #ffd5d1);

@each $flash_def in $flash_types {
    $type: nth($flash_def, 1);
    $colour: nth($flash_def, 2);

    &.#{$type} {
        background-color: $colour;
        background-image: url(../images/#{$type}.png);
    }
}

これは最も洗練されたソリューションではありませんが、他に何も見つからない場合は機能するはずです。それが役に立てば幸い！私ももっと良い方法をいただければ幸いです:)

30
Treeki

ちょうどこれに出くわした、あなたのための答えを持っています。 Sassでは、実際には多次元リストを作成できるため、個々の変数を作成する代わりに、1つの変数を作成してそれらすべてを保持し、ループします。

$Zoo: puma black, sea-slug green, egret brown, salamander red;

@each $animal in $Zoo {
  .#{nth($animal, 1)}-icon {
    background-color: nth($animal, 2);
  }
}

ネストされた各ディメンションが異なる方法（この場合はコンマとスペース）で区切られている限り、1次元リストと同じように多次元リストを作成できます。

更新2013年10月24日

Sass 3.3には、ハッシュ化されたアイテムのセットであるmapsと呼ばれる新しいデータ型があります。これにより、以前の回答を次のように書き直して、目的の結果にさらに近づけることができます。

$Zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red);

@each $animal, $color in $Zoo {
    .#{$animal}-icon {
        background-color: $color;
    }
}

SassMeister でこれが実際に動作しているのを見ることができます

50
Snugug

誰かがそれを必要とする場合に私が使用した別の方法：

$i:0;
@each $name in facebook, Twitter, google_plus, instagram, youtube, pinterest {
    $i:$i+1;
}
2
Pablo Revuelta

別の解決策は、さまざまなリストを作成して「Zip」することです。

//Create lists
$animals: puma, sea-slug, egret, salamander;
$animals-color: black, green, brown, red;

//Zip lists
$Zoo: Zip($animals, $animals-color);

//Do cycle
@each $animal, $color in $Zoo {
    .#{$animal}-icon {
        background-color: $color;
    }
}

おそらく、このソリューションは他のソリューションよりも管理が複雑ですが、リストを複数回使用すると、時間を節約できます。 （私の場合でした）

1
gBaylaender

この機能はSass3.3.0以降でサポートされています（使用するために3.2.14から3.4.4に更新しました）。

@each $animal, $color in (puma, black), (sea-slug, green), (egret, brown), (salamander, red) {
  .#{$animal}-icon {
    background-color: $color;
  }
}

Sassを更新する場合は、後方の非互換性について 変更ログを確認してください にすることをお勧めします。

@ eachを使用した複数の割り当てのSassリファレンス

1
mvemjsunp