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

Question

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

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

用法如下：

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

哪个应该输出（取决于定义的基本字体大小）：

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

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

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

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

score 2 · Accepted Answer

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

此答案中突出显示了一个 hack 作为解决方法：

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

score 1 · Accepted Answer

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

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

不过，有一种解决方法可以解决您想要实现的目标，请参阅14868042、18558368等...

2 回答 2