0

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?

skarpeta
  • 105
  • 6
  • You will probably just need to use a newer version of Less; they are on version 4 something now, and versions 3+ have lots more capabilities for dealing with this. Also does https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc provide an answer to your question? – TylerH Jul 07 '21 at 13:36
  • Please check this thread and [answer](https://stackoverflow.com/a/25354339/8180329) – Buri Jul 07 '21 at 13:42
  • This is no duplicate, because it's not working the same as I expected it. Please reopen it. – skarpeta Jul 08 '21 at 16:08

0 Answers0