How to correctly write a variable in a mixin with parameters to LESS?

Question

Less

We have an entry in the LESS file

@color-red: #ff0000;

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

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

At the end, I hoped to get

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

How to record correctly?
Thanks for the help!

Answer 1

Less can only interpolate variables in selectors, strings, and property names. And there is also a construction @@that allows you to refer to a variable by name, which lies in another variable.

@color-red: #ff0000;

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

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

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