How to generate percentage for keyframes?

[SergeVDev]

Hello everyone!

I'm looking for a way of making a keyframes template with an arbitrary step count.

Unfortunately, neither…

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

…nor…

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

…don't work.

[dosubot[bot]]

Hey, @SergeVDev! I'm here to help you out with any bugs or questions you might have. Let's tackle this together!

To generate percentages for keyframes using Less, you can use the percentage function to format numbers as percentages. Here's how you can modify your code to achieve this:

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

In this example, @value / 7 calculates the percentage step based on the total number of steps (7 in this case), and percentage() converts it to a percentage format. This should generate the desired keyframes with percentage steps.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[matthew-dean]

@dosu This is a hallucination. @{} is not an expression validator; it only can be used for an interpolated variable reference.

This would work, however.

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

[SergeVDev]

Thank you, @matthew-dean. This works.