Прокручивать массив имен переменных в Less

Question

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

На протяжении всего приложения у нас будут различные модули с цветом, прикрепленным к имени класса.

например.

<div class="example_module green">
  ...
</div>

Мы используем LESS для нашего CSS.

В ряде мест мы делаем такие вещи:

.example_module.green { background: @green; }
.example_module.red { background: @red; }
.example_module.blue { background: @blue; }
etc

Я хотел бы иметь возможность установить все эти имена цветов в виде массива и перебирать их. Если мы добавим цвета в будущем, мы должны добавить его только в одном месте.

Псевдокод:

@colors: ['green', 'red', 'blue'];

for each @color in @colors {
  .example_module.@color { background: @color; }
} 

Поддерживается ли что-то подобное в LESS?

Answer 1

Смотрите петли. Например (при условии @green, @red, @blue переменные определены в другом месте):

@colors: green, red, blue;

.example_module {
    .-(@i: length(@colors)) when (@i > 0) {
        @name: extract(@colors, @i);
        &.@{name} {background: @@name}
        .-((@i - 1));
    } .-;
}

- - -

В Modern Less то же самое может быть более простым с помощью плагина Lists:

@colors: green, red, blue;

.for-each(@name in @colors) {
    .example_module.@{name} {
        background: @@name;
    }
}

- - -

А в Legacy Less синтаксический сахар может быть достигнут с помощью:

@import "for";

@colors: green, red, blue;

.example_module {
    .for(@colors); .-each(@name) {
        &.@{name} {background: @@name}
    }
}

Куда ввозят "for" фрагмент (это просто обёртка mixin для рекурсивных циклов Less) можно найти здесь (с примерами здесь и здесь).

Answer 2

Этот миксин прекрасно работает для меня. Второй параметр - это блок кода, который имеет доступ к текущему элементу итерации (@value) и индексу (@i).

1. Определить миксин:

   .for(@list, @code) {
       & {
           .loop(@i:1) when (@i =< length(@list)) {
               @value: extract(@list, @i);
   
               @code();
   
               .loop(@i + 1);
           }
   
           .loop();
       }
   }
   

2. Использование:

   @colors: #1abc9c, #2ecc71, #3498db, #9b59b6;
   
   .for(@colors, {
       .color-@{i} {
           color: @value;
       }
   });
   

3. Результат css:

   .color-1 {
     color: #1abc9c;
   }
   .color-2 {
     color: #2ecc71;
   }
   .color-3 {
     color: #3498db;
   }
   .color-4 {
     color: #9b59b6;
   }
   

Answer 3

С современным LESS (>= 3.7) вы можете использовать встроенный each функция:

/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */
@colors: {
  green: @clr-green;
  red: @clr-red;
  blue: @clr-blue;
}

each(@colors, {
  .example_module.@{key} {
    background: @value;
  }
});

Answer 4

1. Определить миксин:

.foreach(@list, @body, @i: length(@list)) when (@i>0) 
{
    .foreach(@list, @body, @i - 1);

    @n: length(@list);
    @value: extract(@list, @i);
    @body();
    /* you can use @value, @i, @n in the body */
}

2. Использование:

.example-module {
  .foreach (red green blue,
  {
    &.@{value} {
      color: @value;
    }
  });
}

Другой пример:

.nth-child (@list, @style) {
    .foreach(@list, 
    {
      @formula: e(%("%dn+%d", @n, @i));
      &:nth-child(@{formula}) {
        @style();
      }
    });
}

tr {
  .nth-child (#bbb #ccc #ddd #eee,
  {
      background: @value;
  });
}