less的函数与循环——使用总结

来源:简书 2019-01-23 22:31:50
也是不定期更新吧,具体也没有总结一下:
之前的文章 less的配置安装及语法使用 也介绍了一些less的语法,
这里只是根据我平时会用到的进行一个总结:
函数参数带有类名设置

函数定义

这个根据每个的设计稿和基础适配的font-size决定,我这里只是说传入参数生成对应的rem的值
@base:750 / 720 * 0.01;
.px2rem(@name, @px) {
     @{name}: @px * @base * 1rem;
}
函数调用
.px2rem(margin-top,250);
使用语法

如果是参数,类名参数要加大括号@{name},不是冒号左边的不需要,如果有双引号也要加。
less循环输出类名

目标输出
.a{
  background: url("./resource/a.png") top/100% no-repeat;
}
.b{
  background: url("./resource/b.png") top/100% no-repeat;
}
.c{
  background: url("./resource/c.png") top/100% no-repeat;
}
实现思路

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

实现步骤

定义函数
```
    .backgroundcard(@className,@pngName){
          .@{className}{
                background: url("./resource/@{pngName}.png") top/100% no-repeat;
          }
    }
```
定义一个数组
@bgcardList:a,b,c,d,e,f,g;

循环遍历
.loop(@i) when (@i < length(@bgcardList)+1){
    .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
    .loop(@i+1);
}
.loop(1);
语法
+ 列表函数
    - 获取列表的长度  length(@bgcardList)  //7
    - 获取列表元素  extract(@bgcardList, 3)  //c
+ 循环函数
    - loop定义循环次数,when条件判断,符合进入函数,不符合不进入函数。之后次数+1,形成循环。
    - loop函数调用,直接传值1。

@version1.0——2018-8-3——创建《less的函数与循环——使用总结》
分割线

作者:顽皮的雪狐七七
链接:https://www.jianshu.com/p/6d412130fa53
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
原文出处:https://www.jianshu.com/p/6d412130fa53?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。