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问题中的答案使用黑客来实现目标，如果我使用此

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

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

1 个答案: