CODEWITHSUNDEEP
htmlcssless
user2002495
user2002495

Reputation: 2146

.LESS how to add width with duration?

I'm trying to create a loading bar, which will go longer on width with duration, with .less and here's my layout:

    <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>

The LESS part is here:

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

Error came out like this:

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

I'm guessing it's on the whenpart in the less, but i'm not sure how to fix, can anyone explain to me how to do it? Thanks. (Oh yeah, the solution must not include JS or anything else, only pure .less)

Upvotes: 0

Views: 61

Answers (1)

Kroltan
Kroltan

Reputation: 5156

Well, the problem is really here:

@preload_width: (@preload_width + 10%);
  • LESS can't handle variable redefinitions (e.g. changing a variable's value)
  • You're trying to create a variable with its own value.

Both of these problems can be solved by changing your new variable's name.

Upvotes: 3

Related Questions