less笔记

变量

1. 定义：变量名为@开头，以;分号结尾，否则会报错。格式：

@名字:值
@color:#fff;

//在选择器中使用变量，和字符串拼接使用@{名字}
@white:white;
.text-@{white}{
    color: @white;
}
结果
.text-white {
  color: white;
}

2. list变量

//定义，逗号或空格分隔
@numbers:1,2,3,4;
@colors:red,blue,green;

//list 有关的函数
//获取list某个索引对应的值
extract(list变量，索引)
extract(@colors,1)//1
extract(@colors,2)//blue

//生成一系列有间隔的值的list
range(4)//1,2,3,4
range(10px,30px,10)//10px,20px,30px

//遍历list
//有默认变量@value,对应list里的值
each(list变量,{
	.set-@{value}{
		css属性名:@value
	}
})
each(range(3),{
	.fs-@{value}{
		font-size:@value*1em;//1em,2em,3em
	}
})

3. map
   mixins和rulesets（属性规则集）都可以当作map使用

//类似对象，但是键值对后必须以分号;结尾，不能以逗号结尾
//规则集
@变量:{
	键：值；
}
//混入，mixin，
//类名，id选择器后再加一个括号构成名字
.mixin的名字(){
	键：值；
}
#mixin的名字(){
	键：值；
}
@colors:{
	parimary:#fff;
	secondary:#eee;
	info:#999;
}
.set1(){
	parimary:#fff;
	secondary:#eee;
	info:#999;
}

//获取某个map某个键值
//通过“map名[键名]”的形式
@colors[primary]//#fff
.set1[info]//#999

//遍历map
//each方法，默认有@key，@value,@index参数，分别对应键，值，索引
@colors:{
    one:blue;
    two:red;
    three:green;
}

each(@colors,{
    .color-@{key}-@{index}{
        background-color: @value;
    }
})

循环

1. 通过each和range来形成for循环，

range(n)控制循环次数，其实就是对1,2…,n的list进行遍历，推荐使用这个，简单易用。

each(range(4),{
    .col-@{value}{
        height: @value*50px;
    }
})

//结果
.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

2.通过带参数递归的mixin和when来实现

//先定义mixin，后调用，
//参数@n指定边界条件
//默认参数@i为控制变量
//when条件指定调用的条件
//再loop里再调用自己loop，改变控制变量@i的值
.loop(@n,@i:1) when(@i<=@n){
    .col-@{i}{
        height: @i*50px;
    }
    .loop(@n, @i+1) 
};
.loop(4);

//结果：
.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

3 多重循环

由于each函数遍历list,mixin,或者rulesets（规则集）时都有默认的变量@value,@key,@index等，如果要不重新指定参数名称，那么会出现内层each覆盖外层变量的情况，而只有mixin具有重新指定参数名称的特点，所以同时要使用key和value的多重循环最好采用mixin的遍历。
mixin和each，指定参数名称

//参考bootsrap类名的方式
@font-size-base:1rem;
.levels(){
    0:0;
    1:0.25;
    2:0.5;
    3:1;
    4:1.5;
    5:3;
}
.sizes(){
    m:margin;
    p:padding;
}
.directions(){
    t:top;
    b:bottom;
    l:left;
    r:right;
}
//指定参数@v1代表外层each的value,，@k1代表外层each的key
each(.sizes(), .(@v1, @k1){
    //mt-0
    each(.directions(),.(@v2,@k2){
        each(.levels(),.(@v3,@k3){
            .@{k1}@{k2}-@{k3}{
                @{v1}-@{v2}:@v3*@font-size-base;
            }
        })
    });
})

输入结果如下：
.mt-0 {
  margin-top: 0rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 3rem;
}
........省略