Менее динамические имена классов, сгенерированные во время выполнения, или классы, сгенерированные из цикла массива

Question

В настоящее время один из моих разработчиков разработал этот файл меньше:

.countryFlag( @countryName :"DK"){
    content: url("/images/flags/@{countryName}.gif") no-repeat center;
}

a.flag-DK {
    .countryFlag ();
}

a.flag-DE {
    .countryFlag (DE);
}

a.flag-EE {
    .countryFlag (EE);
}

...

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

a.flag-@{country} {
  content: url("/images/flags/@{country}.gif") no-repeat center;
}

это просто соответствует любым определениям. Я знаю, что это может привести к множеству конфликтов, но, возможно, это может быть дополнительно сужено с помощью регулярных выражений? Имеет смысл, но не смог найти это.

Альтернативой может быть создание "статических" классов CSS с использованием некоторого цикла. Рассмотрим эту псевдо-альтернативу:

@countries: 'dk', 'de', 'uk', 'us', ...;

for(country : countries) {
    a.flag-@{country} {
        content: url("/images/flags/@{country}.gif") no-repeat center;
    }
}

и, таким образом, создать классы для заранее определенного списка стран.

Доступна ли какая-либо из этих альтернатив каким-либо способом? Или, может быть, вы посоветуете третий вариант, который я мог упустить из виду? Я чувствую себя немного глупо, когда вижу около 20 с чем-то почти идентичных классов, имеющих различие только в небольшой строке, и думаю, что препроцессор CSS ДОЛЖЕН быть в состоянии сделать это умнее.

Спасибо!

Answer 1

Фрагмент Less.js "for" также содержит несколько строк документации. Я нашел эту страницу очень полезной несколько дней назад, когда столкнулся с такой проблемой, как ваша.

Вы можете просто объявить список значений, которые будут использоваться в качестве строк в цикле foreach. (например @list: banana, apple, pear, potato, carrot, peach;)

Убедитесь, что вы используете последнюю версию Less!