CODEWITHSUNDEEP
css-animationsless
Shtole
Shtole

Reputation: 348

Generating percentage for keyframes in LESS

I want to generate dynamically @keyframes like this, but for an arbitrary number of steps:

@keyframes slide-7-icons
{
    0%  { … }

    14.2857%    { … }

    28.5714%    { … }

    42.8571%    { … }

    57.1429%    { … }

    71.4286%    { … }

    85.7143%    { … }

    100%    { … }
}

The problem is I cannot output the percentage. I tried both var interpolation:

@keyframes test-7
{
    each(range(7),
    {
        @{value}%
        {
            a: b;
        }
    });
}

and string formatting:

@keyframes test-7
{
    each(range(7),
    {
        %("%d", @value)
        {
            a: b;
        }
    });
}

but to no avail (ParseError: Unrecognised input in \css\main.less).

Upvotes: 0

Views: 11

Answers (1)

Shtole
Shtole

Reputation: 348

This approach is working:

@keyframes test-7
{
    each(range(7),
    {
        @percent: (100 / 7 * @value * 1%);
        @{percent}
        {
            a: b;
        }
    })
}

Upvotes: 0

Related Questions