Можно ли использовать значение переменной less в качестве имени другой переменной и примеси?

Question

[Андрей Хохлов]

Не расписываю вопрос подробнее, так как будет слишком много буков. Пытаюсь сделать то, о чём говорили на codefest 2gis: www.slideshare.net/codefest/codefest-2014-2
При этом, у меня есть только эта презентация, и всё - ни видео, ничего другого.

Этапы с генерацией base64, png-спрайта и css - выполнены.
Теперь хотелось бы собрать всё в единый миксин.
Для начала - вариант с base64 иконкой и без фолбэка для ie8.

Данный миксин генерирует нужный CSS, но для иконки "icons_zoom":

.bg-icon(@filename) {
  .data-icons_zoom; // берем base64 из сгенерированного css
  background-repeat: no-repeat;
  .sprite-width(@icons_zoom); // берем размеры иконки из css для спрайта (больше неоткуда)
  .sprite-height(@icons_zoom);
}

Если бы то что я хочу работало, он бы выглядел так:

.bg-icon(@filename) {
  .data-@filename;
  background-repeat: no-repeat;
  .sprite-width(@@filename);
  .sprite-height(@@filename);
}

Вопрос - можно ли (и если можно - то как) использовать значение переданной в миксин переменной таким образом?

Answer 1

[Nodge]

@@filename - можно.

Mixins можно сделать через guards:

@sprite1: 100px;
@sprite2: 200px;

.data-sprite(@filename) when (@filename = sprite1) {
  background: red;
}

.data-sprite(@filename) when (@filename = sprite2) {
  background: green;
}

.sprite-width(@width) {
  width: @width;
}

.sprite-height(@width) {
  height: @width;
}

.bg-icon(@filename) {
  .data-sprite(@filename);
  background-repeat: no-repeat;
  .sprite-width(@@filename);
  .sprite-height(@@filename);
}

html {
  .bg-icon(sprite1);
}

body {
  .bg-icon(sprite2);
}

Пример: jsbin.com/cipafe/1/edit