来自字符串插值的变量返回非单位值

Question

这是我第一次使用 LESS 构建网站，遇到了以下代码最能描述的问题：

@section-row-padding-size-xs: 30px;
@section-row-padding-size-sm: 50px;
@section-row-padding-size-md: 100px;
@section-row-padding-size-lg: 140px;

.section-row-padding( @size ) {
    @padding-size: ~"@{section-row-padding-size-@{size}}";

    .section-row {
        padding: @padding-size 0;

        &.quarter-padding-top {
            padding-top: @padding-size * 0.25;
        }

        &.quarter-padding-bottom {
                padding-bottom: @padding-size * 0.25;
        }

        &.half-padding-top {
            padding-top: @padding-size * 0.5;
        }

        &.half-padding-bottom {
            padding-bottom: @padding-size * 0.5;
        }

        &.three-quarters-padding-top {
            padding-top: @padding-size * 0.75;
        }

        &.three-quarters-padding-bottom {
            padding-bottom: @padding-size * 0.75;
        }
    }
}

此代码所做的只是输出正确的填充大小以用于媒体查询。

使用 lg、md、sm 和 xs 参数对 .section-row-padding() 的任何调用都应输出适当的填充大小。

问题是由@padding-size 不解释为像素单位而是字符串引起的。我尝试了几种插值方法，但没有一个有效。 isnumber( @padding-size ) 输出假，istring( @padding-size ) 输出真。 @padding-size + 0px 也不起作用，它显示 Operation on an invalid type。

我有什么遗漏的吗？

感谢您的宝贵时间和回答！

Answer 1

Less 不正式支持嵌套插值，即~"@{section-row-padding-size-@{size}}"。 （它在当前版本中有效，但最终可能随时停止工作）。

实现你想要的正确方法是：

.section-row-padding(@size) {
    @var-name: "section-row-padding-size-@{size}";
    @padding-size: @@var-name;
    padding: (@padding-size * 2);
}

或更短：

.section-row-padding(@size) {
    @padding-size: "section-row-padding-size-@{size}";
    padding: (@@padding-size * 2);
}

请参阅"variable references" 了解@@ 的含义。

问题是由@padding-size 未解释为像素单位而是字符串引起的。

没错。使用~"" 就像对编译器说“不要解释这个值，它只是一些我希望你传递的值的字符串”。因此，在您的示例中，~"@{section-row-padding-size-@{size}}" 返回的值的类型不是数字，它不能用于算术运算（因此：“对无效类型的操作”）。

（“为什么应尽可能避免使用~""”的几个链接：1、2、3、4 等）。