为什么这个LESS css sizing mixin不能编译？

Question

我正在尝试创建一个mixin，它将在px和rem中采用两个参数并输出大小。这是代码：

.sizing (@cssProperty; @sizeValue) {
  @cssProperty: ((@sizeValue * @basefont) * 1px);
  @cssProperty: (@sizeValue * 1rem);
}

用法如下：

h2 {
  .sizing(font-size; 1)
}

应该输出哪个（取决于定义的basefont大小）：

h2 {
  font-size: 12px;
  font-size: 1rem;
}

但simpLESS不会编译它，并说这两行中有错误：

.sizing (@cssProperty; @sizeValue) {
.sizing(font-size; 1);

我做错了什么？是因为变量属性名称吗？

Answer 1

注意到您正在尝试将变量用作属性名称，而不是使用less不支持的值。

此答案中突出显示了一个黑客攻击解决方法：

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

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

Answer 2

LESS不允许将变量用作CSS属性名称。

在上面的代码中，@cssProperty: ((@sizeValue * @basefont) * 1px);实际上是新@cssProperty变量的定义而不是CSS property: value语句，因此它不会产生CSS输出。

有一个解决方法可以实现您想要实现的目标，请参阅14868042，18558368等等。