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没有被解释为px单元而是作为字符串。我已经尝试了几种插值方法，但它们都不起作用。 isnumber( @padding-size )输出false，istring( @padding-size )输出为true。 @padding-size + 0px也不起作用，它表示对无效类型进行操作。

我错过了什么吗？

感谢您的时间和回答！

Answer 1

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

实现目标的正确方法是：

.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未解释为px单位而非字符串引起的。

完全。使用~""就像对编译器说“不解释这个值，它只是一些字符串，无论我希望你通过什么值”。因此，示例中~"@{section-row-padding-size-@{size}}"返回的值的类型不是数字，并且不能与算术运算一起使用（因此：“对无效类型的操作”）。

（“~""应尽可能避免”{{1}}的一些链接“：1，2，3，4等。）< / p>

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

1 个答案: