将属性名称作为参数传递给 mixin LESS

Question

我是新手。我正在尝试将 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：“行号等”行的“我的文件路径”中无法识别的输入

在我寻找答案的过程中，我发现这些问题大约有 1 年的历史，他们说（当时）不可能，因为 LESS 不支持它现在有可能吗？

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

this 问题中的答案使用 hack 来实现目标我应该使用这个

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

Send properties as argument for mixin

回答：

找到答案here感谢您的评论之一

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

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

可以使用的

.border(right,#efefef)

所以编译为：

border-right: 1ps solid #efefef;

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

Answer 1

我认为这就是你想要做的：

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

---

更新：

---

+Harry 建议：

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

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