Home > Mobile >  How to generate @page with loop in less
How to generate @page with loop in less

Time:11-11

I am not familiar with complex script in less but, I search to use a loop in order to create the following CSS:

@page page_00_recto {
 ....
 size: A4
 margin-top: 00mm;
}
@page page_01_recto {
 ....
 size: A4
 margin-top: 00mm;
}
...

I have tried this

each(range(1, 100, 1), {
  @page page_{@index}_recto {
    size: 110mm 240mm;
    margin-top: @value;
  };
});
...

But I obtains always this error

@page tab_{@index}_recto {
@index rule is missing block or ending semi-colon

Where is my error? thank you in advance for your help

CodePudding user response:

  1. You must be using Less >3.9
  2. You must escape @ in @page
  3. You should be using dynamically built selector

So final LESS code looks like this:

each(range(1, 100, 1), {
  @selector: ~"@page page_@{index}_recto";
  
  @{selector} {
    size: 110mm 240mm;
    margin-top: @value;
  };
});
  • Related