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

Abdul Rafay Shaikh 发表于 Dev

Abdul Rafay Shaikh |

我是新手。我正在尝试将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不支持它，现在可以吗？

如何在更少的时间内将属性名称作为参数传递给mixin

这个问题的答案是使用hack来达到目标的，我应该使用这个

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

发送属性作为mixin的参数

回答：

在这里找到答案感谢您的评论之一

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

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

可以使用的

.border(right,#efefef)

因此编译为：

border-right: 1ps solid #efefef;

在LESS中使用属性名称中的变量（动态属性/属性名称插值）

海尔顿

我认为这是您想要做的：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。