Sass @each с несколькими переменными - PullRequest
Новая
       13

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

24 голосов
/ 04 июля 2011

Я только начинаю с 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};
  }
}

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

Ответы [ 5 ]

50 голосов
/ 05 декабря 2011

Только что с этим сталкивался, есть ответ для вас.В 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 появился новый тип данных под названием maps , которые представляют собой хэшированный набор элементов.С этим мы можем переписать мой предыдущий ответ следующим образом, чтобы он был намного более похож на желаемый результат: 

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

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

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

30 голосов
/ 05 июля 2011

Я в одной лодке (новичок в 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 голосов
/ 12 июля 2013

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

$i:0;
@each $name in facebook, twitter, google_plus, instagram, youtube, pinterest {
    $i:$i+1;
}
1 голос
/ 19 сентября 2014

Эта функциональность поддерживается для 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 для нескольких назначений с @ каждому

0 голосов
/ 29 марта 2016

Другим решением может быть создание разных списков и их "архивирование". 

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

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

...