Sass @each с несколькими переменными

Я только начинаю с Sass и Compass, и я люблю его. Что-то, что я хотел бы сделать, это воспользоваться функцией @each, чтобы упростить повторяющиеся задачи. Тем не менее, я видел только примеры @each вставки одной переменной, и я хотел бы иметь возможность использовать несколько переменных.

Стандартный способ (из Sass Reference):

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

Возможно ли это?

Ответ 1

Я нахожусь в одной лодке (новичок в 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);
    }
}

Это не самое элегантное решение, но оно должно работать, если вы не можете найти что-либо еще. Надеюсь, поможет! Я был бы признателен за лучший метод:)

Ответ 2

Только что наткнулся на это, ответьте за вас. В Sass вы можете иметь многомерный список, поэтому вместо создания отдельных переменных вы должны создать одну переменную, чтобы удерживать их все, а затем перебирать их:

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

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

Вы можете иметь многомерные списки, как если бы у вас были одномерные списки, если каждое вложенное измерение разделено другим способом (в нашем случае, запятыми и пробелами).

ОБНОВЛЕНИЕ 24 октября 2013 г.

В Sass 3.3 существует новый тип данных, называемый картами, которые являются хешированным набором элементов. При этом мы можем переписать мой предыдущий ответ следующим образом, чтобы гораздо ближе напоминать желаемый результат:

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

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

Вы можете видеть это в действии над SassMeister

Ответ 3

Другой способ, который я использовал, если кому-то это нужно:

$i:0;
@each $name in facebook, twitter, google_plus, instagram, youtube, pinterest {
    $i:$i+1;
}

Ответ 4

Эта функция поддерживается для Sass 3.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.

Ссылка Sass для нескольких назначений с помощью @each

Ответ 5

Другим решением может быть создание разных списков и "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;
    }
}

Возможно, это решение сложнее, чем другие, но если вы используете список более одного раза, вы можете сэкономить время. (был мой случай)