如何在LESS中通过循环生成@page规则？

需求 #

希望通过LESS循环生成如下格式的CSS：

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

尝试的代码及错误 #

尝试的LESS代码：

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

出现错误：

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

错误原因及修正方案 #

错误原因 #

1. LESS中不能直接在@page选择器内用@index拼接字符串，必须先将完整选择器定义为变量，再通过插值语法@{}引用
2. 若需要两位数字序号（如00、01），原代码的range(1,100)会生成1-99的数字，缺少补零处理，无法得到page_01_recto这类格式

修正后的代码 #

// 生成0-99的序列，对应00-99的页码
each(range(0, 99, 1), {
  // 补零处理：数字小于10时前面加0，生成两位序号
  @pageNumber: if(@index < 10, "0@{index}", @index);
  // 转义字符串定义完整的@page选择器名称
  @pageSelector: ~"page_@{pageNumber}_recto";
  
  // 通过插值引用变量，生成合法的@page规则
  @page @{pageSelector} {
    size: 110mm 240mm;
    // 这里根据需求设置margin-top，示例用循环值对应毫米数，固定值可直接写00mm
    margin-top: @value * 1mm;
  }
});

代码说明 #

• range(0,99)：生成0到99的循环序列，覆盖00到99的页码需求
• if(@index <10, "0@{index}", @index)：实现数字补零，确保1变为01、10保持10
• ~"page_@{pageNumber}_recto"：用转义字符串解析变量插值，生成合法的选择器名称
• @page @{pageSelector}：通过插值引用预先定义的选择器变量，避免语法错误

内容的提问来源于stack exchange，提问作者r31.m