Css 在mixin LESS中将属性名作为参数传递

我是一个新手。我试图像这样将css属性作为参数传递

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

意思是每次我打字

.border(right,#efefef);

它应该输出

border-right:1px solid #efefef;

我正在使用winless编译winless版本1.8.3和LESS.js版本1.7.3的代码

Winless编译器给出错误消息

ParseError:在“行号等”行的“我的文件路径”中输入无法识别

在我寻找答案的过程中，我发现了这些问题，他们大约有一岁了，他们说这是不可能的（当时），因为没有更少的人支持。现在可能吗

这个问题的答案使用了一个hack来实现我应该使用它吗

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

回答：

找到答案谢谢你的评论

这就解决了问题，当我问这个问题时，我几乎答对了。我只需要在css属性参数中添加大括号

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

那是可以用的

.border(right,#efefef)

因此，这可编译为：

border-right: 1ps solid #efefef;

---

我想这就是你想要做的：

//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);
    }
}

因此，首先我声明了要使用的Mixin帮助程序，然后使用它并重新使用它，使用

&

字符执行类名

这将在CSS中输出：

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

---

更新：

---

建议如下：

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

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

---

看见这似乎并不完全符合OP的要求（尽管所需的概念类似）。这将为所有情况生成完整边框（所有边），因为无论选择器类如何，属性都是相同的。您需要将右/左属性设置为.Yep，这是一种改进的方法，可以用更少的代码来解决问题。我会用你的建议更新答案。谢谢欢迎朋友：）顺便说一句，

width

只是为了说明而添加的，所以这不是必需的。是的，这正是我要找的，在这里找到了解决问题的答案