如何在LESS中通过双循环生成指定格式的padding样式类 优先使用内置工具

实现方案（优先使用LESS内置each函数） #

LESS 3.7及以上版本内置了each迭代工具，无需手写递归即可快速实现双循环，代码如下：

// 定义水平、垂直方向的padding取值列表，可按需扩展更多数值
@padding-x: 0, 1;
@padding-y: 0, 1;

// 外层循环遍历水平方向padding取值
each(@padding-x, .(@x) {
  // 内层循环遍历垂直方向padding取值
  each(@padding-y, .(@y) {
    .p_@{x}_@{y} {
      padding: ~"@{x}rem @{y}rem";
    }
  });
});

说明 #

• 上述代码编译后会直接生成你需要的所有.p_x_y样式类，数值范围可直接修改@padding-x和@padding-y列表扩展，比如要生成0-3的所有组合，只需把列表改为0,1,2,3即可。
• 类名拼接用@{变量名}的变量插值语法实现，~""用来处理字符串转义，避免LESS把属性值里的空格识别为语法分隔符。

内容的提问来源于stack exchange，提问作者Roman