pass property name as an argument in a mixin LESS

Question

I am a newbie at less. I am trying to pass css property as an argument like this

.border(@position:"left",@color: #ddd){
    border-@position :1px solid @color;   
}

means that every time I type

.border(right,#efefef);

it should output

border-right:1px solid #efefef;

I am using winless to compile the code Winless version 1.8.3 and LESS.js version 1.7.3

Winless compiler gives error

ParseError: Unrecognised input in "My-file-path" on line "line No. etc"

in my search for the answers I found these questions they are about 1 year old and they say that it is not possible (at that time) because it is not supported by LESS is it possible now?

How to pass a property name as an argument to a mixin in less

the answer in this question uses a hack to achieve the goal should I use this

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

Send properties as argument for mixin

ANSWER:

found the answer here thanks for one of the comment

this solved the problem I almost got it right when I asked the question just had to add curly braces to the css property argument

.border(@position:"left";@color:#ddd){
    border-@{position}:1px solid @color;
}

that can be used

.border(right,#efefef)

so this compiles to :

border-right: 1ps solid #efefef;

Using variables in property names in LESS (dynamic properties / property name interpolation)

Answer 1

I think this is what you are trying to do:

//A simple Border Mixin to start
.borderMixin(@color: #ddd){
    border: 1px solid @color;
}
 //Using the Mixin
 .border{
  .borderMixin(@color: #ddd);
    &-right {
      .borderMixin(@color: #F01);
    }
    &-left {
      .borderMixin(@color: #000);
    }
}

So first I've declared the Mixin helper to be used and then I used it and re-use it exending the class name with the & character

That will output this in your CSS:

/*********
*The resulted css code:
*/
.border {
  border: 1px solid #dddddd;
}
.border-right {
  border: 1px solid #ff0011;
}
.border-left {
  border: 1px solid #000000;
}

---

UPDATE:

---

+Harry suggests this:

.borderMixin(@position: left, @color: #ddd){
  border-@{position}: 1px solid @color;   
}

.border{
    width: 200px;
  .borderMixin(right,#222);
  .borderMixin(left,#222);
}