Доступ к имени переменной, а не к ее значению

Я пытаюсь написать цикл, который будет перебирать цвета и сокращать объем кода в моем файле scss. Вот простой пример того, что у меня есть:

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

.color1-bg { background-color: $color1; }
.color2-bg { background-color: $color2; }

.color1-border { border-color: $color1; }
.color2-border { border-color: $color2; }

И так далее.

Я ищу способ написать цикл, чтобы при использовании переменной для генерации класса она имела имя переменной, а не ее значение:

@each $color in $colour1, $colour2, $colour3, $colour4 {
    .#{$color}-bg { background-color: $color; }
    .#{$color}-border { border-color: $color; }
}
 Rockbot11 окт. 2012 г., 18:43
Я думаю, вы просто забыли два} - проверь мой ответ
 Eric Holmes11 окт. 2012 г., 17:34
По сути, на клиентском сайте есть «темы», которые они хотят согласовать по цветам, и они также хотят иметь возможность выбирать цвета для списка цветов в своем руководстве по стилю. Я в основном позволяю им выбирать из «color1, color2, color3» и т. Д., И использую классы для отображения образцов цвета, и буду использовать их выбор в качестве префикса класса.
 ultranaut11 окт. 2012 г., 17:16
Ваш пример, похоже, потерян.
 Eric Holmes11 окт. 2012 г., 19:13
Исправил мой пример - см. Мой комментарий ниже, почему он не работает.
 cimmanon11 окт. 2012 г., 17:32
Не могли бы вы привести пример желаемого результата? Кроме того, пример кода не кажется полностью практичным.

Ответы на вопрос(4)

это довольно много времени от оп, но подумал, я все равно добавлю это :)

Это то, что вы ищете с наименьшим количеством повторений. Вы можете просто добавить новые цвета в ваш массив $ eric-holmes-colors и перекомпилировать.

$eric-holmes-colors: "blue", "red", "white", "black";

@each $color in $eric-holmes-colors {
    .#{$color}-bg {
        background-color: #{$color};
    }
    .#{$color}-border {
        border-color: #{$color};
    }
}
 Eric Holmes27 янв. 2014 г., 17:57
Хороший. Принятый ответ - это больше, чем я искал, так как они были существующими переменными цвета. Я также хотел, чтобы индекс был частью имени (.color1-bg). Но спасибо! :)

но я сам не пробовал.

@each $color in $color1, $color2, $color3, $color4 {
  .#{$color}-bg { background-color: $color;}
  .#{$color}-border { border-color: $color;}
}

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives

 Eric Holmes11 окт. 2012 г., 19:07
Проблема здесь в том, что.#{$color}-bg переводит на.white-bg скорее, чем.color1-bg

твета, что приводит к довольно элегантному коду (по моему не столь скромному мнению).

Я использую голландские названия цветов, я делаю это специально, чтобы прояснить, что мы не имеем дело с именами цветов HTML.

$rood      : #e3004a;
$blauw     : #009ee0;

@each $color in ('rood', $rood), ('blauw', $blauw) {

    $name: nth($color, 1);
    $value: nth($color, 2);

    .#{$name} {
        a{
            background-color: $value;
        }                   
    }
}

CSS

.rood a { background-color: #e3004a; }

.blauw a { background-color: #009ee0; }
 Eric Holmes11 дек. 2013 г., 15:19
Я действительно предпочитаю использовать имена цветов в качестве переменных. Это делает ваши файлы SASS намного более читабельными.
 Alan Shortis11 дек. 2013 г., 10:48
Побочный момент, но я бы не использовал имя цвета при именовании ваших переменных.
 Eric Holmes11 дек. 2013 г., 15:20
@ Идеограмма классная концепция. Я использовал индексы (colour1-5), поэтому мне нужно было только сохранить индекс в базе данных на уровне каждой записи (позволял пользователю выбирать цвет для сообщения).
Решение Вопроса

вам нужно будет сохранить его как дополнительное значение.

Sass 3.2 и старше (список списков)

У Sass пока нет сопоставлений, поэтому следующая лучшая вещь - это список списков.

$color1: ('color1', blue);
$color2: ('color2', red);
$color3: ('color3', white);
$color4: ('color4', black);

@each $color in $color1, $color2, $color3, $color4 {
    $name: nth($color, 1);
    $value: nth($color, 2);
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}
Sass 3.3 и новее (сопоставления)

Начиная с 3.3, у вас есть доступ к сопоставлениям. Функционально он такой же, как список списков, но синтаксически более лаконичен.

$colors:
    ( 'color1': blue
    , 'color2': red
    , 'color3': white
    , 'color4': black
    );

@each $name, $value in $colors {
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}
вперемежку

Или, если ваш цвет n, ames действительно "color1", "color2" и т. Д., Вы также можете просто создать имя на лету, а не указывать их явно:

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

$num: 0;
@each $color in ($color1, $color2, $color3, $color4) {
    $num: $num + 1;
    .color#{$num}-bg { background-color: $color; }
    .color#{$num}-border { border-color: $color; }
}
 Eric Holmes11 окт. 2012 г., 20:18
Названия цветов действительно увеличиваются .. нет смысла определять их, правда. Это именно то, что я искал. Brilliant! Спасибо @hopper!
 Allan Hortle27 янв. 2014 г., 23:58
Вы можете создавать вложенные именованные списки, чередуя разделители между запятыми и пробелами.$colorList: "red" $red, "green" $green ;

Ваш ответ на вопрос