目录
- 函数参数带有类名设置
- 函数定义
- 函数调用
- 使用语法
- less循环输出类名
- 目标输出
- 实现思路
- 实现步骤
- 语法说明
也是不定期更新吧,具体也没有总结一下: 之前的文章 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
。
之后将不定期更新...