像素到雷姆斯单位转换混合只是乘法使用的值

Question

尝试获取rems值 但在变量调用中缺少 '[...]' 查找'

@root-font-size: 16px;

.px-to-rem(@px) {
    @rem: (@px / @root-font-size) * 1rem;
    @rem;
}

.my-element {
    font-size: .px-to-rem(20px); // Returns the numeric value in rem
}

Answer 1

对于在搜索错误时发现此问题的其他人：

Missing '[...]' lookup in variable call

当您尝试不正确地使用 less 变量时，会显示此错误。
可能是一个整体属性：属性名-属性值的集合。即作为规则集中的整行。例如：

// --- BAD example
@myvar: color: blue
.myslector {
   @myvar;
}
// --- BAD example

Less变量不是其值的字面替换，变量的使用方式是有规则的。
最接近OP的情况是变量插值。
尽管从上面链接的示例来看，它可能看起来像

@{myvar}

构造可以在任何地方使用，但它可能不能用作完整的属性名称-属性值集。也就是说，在 CSS 规则集中以分号分隔的行。
我不明白为什么，我会发现它很实用，甚至期望变量插值以这种方式表现，但事实并非如此。

对于OP的具体问题。

阅读文档。
这个例子并不是 less 的工作原理。

解决方案 1：Mixin 作为函数
函数的返回将是一个对象，您可以从中索引所需的变量：

@root-font-size: 16px;

.px-to-rem(@px) {
    @rem: (@px / @root-font-size) * 1rem;
}

.my-element {
    font-size: .px-to-rem(20px)[@rem]; // Returns the numeric value in rem
}

解决方案 2：参数混合 这将：

现有样式的“混合”属性

@root-font-size: 16px;

.px-to-rem(@px) {
    font-size: (@px / @root-font-size) * 1rem;
}

.my-element {
    .px-to-rem(20px);
}