less 函数和循环

背景 项目中 less 使用循环输出类和使用的函数

函数参数带有类名设置

用于移动端适配的动态计算方式

函数定义

  .small(@name, @value) {
      @{name}: (@value/100rem);
    }

函数调用

.small(margin-left,16);

使用语法

如果是参数，类名参数要加大括号@{name}，不是冒号左边的不需要，如果有双引号也要加。,如果右边内容有计算加上括号

less 循环输出类名

目标类名

  .p0 {
  padding: 0px;
}
.ml0 {
  margin-left: 0px;
}
.mr0 {
  margin-right: 0px;
}
.p1 {
  padding: 1px;
}
.ml1 {
  margin-left: 1px;
}
.mr1 {
  margin-right: 1px;
}
.p2 {
  padding: 2px;
}
.ml2 {
  margin-left: 2px;
}
.mr2 {
  margin-right: 2px;
}

实现思路

1. 由于形式上面很类似，所以先定义一个模板函数；
2. 定义一个 less 列表，把需要的类名都写上；
3. 循环遍历列表，调用函数。

实现步骤

1. 定义函数，以及函数内容

    .setmp(@n,@i:0) when(@i<@n){
      .p@{i} {padding:unit(@i,px);}
      .ml@{i} {
        margin-left:unit(@i,px);
      }
      .mr@{i} {
        margin-right:unit(@i,px);
      }
      .setmp(@n,(@i+1));
    }

2. 执行

.setmp(3);

3. 完整

.setmp(@n,@i:0) when(@i<@n){
  .p@{i} {padding:unit(@i,px);}
  .ml@{i} {
    margin-left:unit(@i,px);
  }
  .mr@{i} {
    margin-right:unit(@i,px);
  }
  .setmp(@n,(@i+1));
}
  .setmp(3);

语法说明

1. 循环函数
   • setmp 定义循环，when 作为执行条件
   • 函数模版内没执行一次进行一次累加，用于下一次的判断
   • 函数调用，这里可以接收来两个参数，次数和初始值
   • unit是less自带单位变换的方法,unit(10,10px)得到10px