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部分的较少，但我不确定如何修复，有人可以向我解释如何做到这一点吗？谢谢。（哦，是的，解决方案不得包括JS或其他任何内容，只有纯.less）

Answer 1

嗯，问题确实在这里：

@preload_width: (@preload_width + 10%);

LESS无法处理变量重定义（例如更改变量的值）
您正在尝试使用自己的值创建变量。

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

。如何添加宽度与持续时间？

1 个答案: