变量
- 定义:变量名为@开头,以;分号结尾,否则会报错。格式:
@名字:值
@color:#fff;
//在选择器中使用变量,和字符串拼接使用@{名字}
@white:white;
.text-@{white}{
color: @white;
}
结果
.text-white {
color: white;
}
- 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
}
})
- 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;
}
........省略