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

【问题标题】：Why won't this LESS css sizing mixin compile?为什么这个 LESS css sizing mixin 不能编译？
【发布时间】：2025-11-25 05:15:02
【问题描述】：

我正在尝试创建一个 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);

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

这很奇怪，在他们的网站上说推荐使用分号：参数要么用分号要么用逗号分隔。建议使用分号。 Source
不确定，以前从未使用过分号。让我知道这是否有效。
嗯，它返回一个编译器错误，所以我猜它不会:)。可能是编译器。顺便说一句，在您进行更改后，它可以毫无错误地编译，但是 mixin 没有返回任何内容（因此在我的示例中没有字体大小），有什么想法为什么它不起作用？
在参数列表中谈到逗号与分号 - 好吧，这只是 LESS 背后的一两个开发人员的建议......确实，在某些（非常罕见且非常高级的用例) 情况下，在 CSS 值中扩展这些变量时，逗号可能会产生一些意想不到的副作用（主要是因为许多 CSS 属性也使用逗号作为它们的值分隔符）......但是 LESS 社区仍然使用逗号（毫无疑问将 i> 出于明显的原因使用逗号）因此，如果您选择使用分号方式，请准备好让您的代码阅读者感到震惊:)

【解决方案2】：

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

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

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

【讨论】：