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

问题描述：

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

This is the first time I'mn building a site using LESS and encountered a problem best described by the code below:

@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;
        }
    }
}

此代码所做的全部工作是输出正确的填充大小以用于媒体查询.

All this code does is outputting the right padding sizes for use in media queries.

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

Any call to .section-row-padding() either with lg, md, sm and xs argument should output the appropriate padding sizes.

此问题是由于@ padding-size不是作为px单位而是作为字符串来解释的.我尝试了几种插值方法，但没有一个起作用. isnumber( @padding-size )输出false，而istring( @padding-size )输出true. @padding-size + 0px也不起作用，它说对无效类型进行操作.

The problem is caused by the @padding-size not intepreted as a px unit but rather as a string. I've tried several interpolation methods, but none of them works. isnumber( @padding-size ) outputs false and istring( @padding-size ) outputs true. @padding-size + 0px does not work either, it says Operation on an invalid type.

有什么我想念的吗?

感谢您的时间和答复！

答

嵌套插值，即~"@{section-row-padding-size-@{size}}"在Less中不受官方支持. (它可以在当前版本中使用，但最终可能会随时停止工作.)

Nested interpolation i.e. ~"@{section-row-padding-size-@{size}}" is not officially supported in Less. (It works in current versions but may stop to work at any moment eventually).

实现所需目标的正确方法是:

The correct method to achieve what you want is:

.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);
}

有关@@的含义，请参见变量引用" . /p>

See "variable references" for @@ meaning.

问题是由@padding-size而不是px单位而是字符串引起的.

The problem is caused by the @padding-size not interpreted as a px unit but rather as a string.

完全正确.使用~""就像对编译器说不要解释该值，它只是一些字符串，无论我要传递什么值".因此，在您的示例中，~"@{section-row-padding-size-@{size}}"返回的值的类型不是数字，并且不能与算术运算一起使用(因此:对无效类型的操作").

Exactly. Using ~"" is like saying to the compiler "do not interpreter this value, it's just some string with whatever value I want you to pass through". Thus the type of the value returned by ~"@{section-row-padding-size-@{size}}" in your example is not a number and it can't be used with arithmetic operations (hence: "Operation on an invalid type").

(为什么应尽可能避免使用~""的一些链接": 1 ， 3 ， 4 等).

(A few links for "why ~"" should be avoided whenever possible": 1, 2, 3, 4 etc.).

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

相关推荐