Как правильно записать в LESS переменную в примеси с параметрами?

Question

[Лариса]

Имеем в LESS файле запись

@color-red: #ff0000;

.addition-all(@color){
  .test-1 {
    background-image: url("bg-@{color}.gif");
  }
  .test2 {
    color: @color-@{color};
  }
  
}

.red{
  .addition-all(red);
}

На выходе надеялась получить

.red .test1 {
  background-image: url("bg-red.gif"); /* отработала верно */
}
.red .test1 {
  color: #ff0000;  /*   отдает color: red;  */
}

Как корректно сделать запись?
Спасибо за помощь!

Answer 1

[Константин Китманов]

Less умеет интерполировать переменные только в селекторах, строках и именах свойств. А еще есть конструкция @@, которая позволяет обратиться к переменной по имени, лежащей в другой переменной.

@color-red: #ff0000;

.addition-all(@color) {
  .test-1 {
    background-image: url("bg-@{color}.gif");
  }
  .test2 {
    @cl: "color-@{color}";
    color: @@cl;
  }
}

.red {
  .addition-all(red);
}

P.S. less2css.org/#%7B%22less%22%3A%22%40color-red%3A%2...

Comments

[Лариса]

Огромное спасибо!

Answer 2

[Лариса]

@color-red: #ff0000;
.addition-all(@color) {
  .test-1 {
    background-image: url("bg-@{color}.gif");
  }
  .test2 {
    color: ~'@{color-@{color}}';
  }
}

Еще один вариант записи