html - .LESS如何增加宽度和持续时间？

Question

我正在尝试创建一个加载栏，它的宽度会随着持续时间的增加而变长，使用 .less 这是我的布局:

    <section class="home-page container">
        <div class="home-content col span_8_of_8">
            <div class="preloader-1">
                <em class="loader"></em>
            </div>
        </div>
    </section>

LESS 部分在这里:

    div.preloader-1 {
        width: 100%;
        border-radius: 1px;
        border: thin solid #d5d5d5;

        em.loader {
            background: @main-red;
            width: @preload_width;
            .addBar('width', 5s);
        }
    }

@body-font: 'Droid Sans', sans-serif;
@heading-font: 'Oswald', sans-serif;

@flash-red: #ff0000;
@flash-green: #40bc88;

@main-green: #40bc88;

/* preloader 1 settings */

@preload_width: 10%;
@preloader1_class: 'preloader-1';

.addBar(@property, @duration, @style:ease-in-out) when(@preload_width <= 100%) {
    -webkit-transition-property: @property;  
    -webkit-transition-duration: @duration;
    -webkit-transition-timing-function: @style;

    -moz-transition-property: @property;  
    -moz-transition-duration: @duration;
    -moz-transition-timing-function: @style;

    -ms-transition-property: @property;  
    -ms-transition-duration: @duration;
    -ms-transition-timing-function: @style;

    -o-transition-property: @property;  
    -o-transition-duration: @duration;
    -o-transition-timing-function: @style;

    transition-property: @property;  
    transition-duration: @duration;
    transition-timing-function: @style;

    @preload_width: (@preload_width + 10%);
}

错误是这样出来的:

>> SyntaxError: Recursive variable definition for @preload_width in app\assets\s
tylesheets\less\front\preloader_1.less on line 9, column 3:
>> 8            width: @preload-width;
>> 9            .addBar('width', 5s);
>> 10   }

我猜它在 when 部分的 less 部分，但我不确定如何修复，有人可以向我解释如何做吗？谢谢。 (哦，是的，解决方案不能包含 JS 或任何其他内容，只能包含纯 .less)

Answer 1

嗯，问题真的来了:

@preload_width: (@preload_width + 10%);

• LESS 无法处理变量重新定义(例如更改变量的值)
• 您正在尝试创建一个具有自己值的变量。

这两个问题都可以通过更改新变量的名称来解决。