Escaped calc inside Recursive Mixin throws error

33 views Asked by At

Currently I use less version 2.5.3 and to have the default css calc behaviour I have to escape it like this: width: calc(100vw - 30px); becomes this: width: calc(~"100vw - 30px");

This is working, but not when I use Recursive Mixins.
I use this compiler to test my correct version: http://ecomfe.github.io/est/fiddle/#version=2.5.3&autoprefix=false&est=true

This is my code:

        .generate_rows_tablet_m_4 (@i , @n) when (@i < 41) {
            .start-row-m-@{i}.row-m-4 {
                height: calc(~"100vw - 15px");
                top: calc(@n * (~"50vw - 7.5px"));
            }

            .generate_rows_tablet_m_4(@i + 1, @i * 0.5)
        }

        .generate_rows_tablet_m_4(2, 0.5);

The compiler says the problem is in line 4. When I remove the escape it's working without error but the calculation is then wrong. When I escape the whole calc like this top: ~"calc(@n * (50vw - 7.5px))"; it also won't calculate because @n gets ported to the frontend which obviously won't work.

Do you have any idea how to fix this?

0

There are 0 answers