/*1、less中变量声明:@变量名称*/
@bgColor:red;
@border:1px solid;
/*2、使用变量*/
.div1{background-color:@bgColor;border:@border;}
/*3、函数的使用*/
.setColor(@c){//定义了一个函数,带有参数
background-color:@c;//这是把参数传递给了背景
border:1ps solid @c;
color:@c;
}
.div{//div调用这个函数
.setColor(red)//给函数的参数是red,但是这个函数名必须跟定义的函数名一致
}
/*4、嵌套方法*/
div{
p{
span{color:blue;}
}
}
/*5、less循环*/
.loop(@index) when (@index > 0){//当index大于0的时候执行,类似递归函数
.loop(@index - 1);
//必须这么写
.div@{index}{
width:@index * 1px;
}
}
/*使用函数*/
.div{//如果有这个.div的话,那么编译出来的class前面就有div,如果只是.loop(10);编译出来的只是单纯的class名字
.loop(10);//里面的参数就是截止到多少停止
}
/*如果要在一个less文件中运用另一个less文件的话就得导入*/
@import "这里写另一个less文件路径"
/*去除a标签在移动端的时候点击时的高亮状态*/
a{-webkit-tap-highlight-color:transparent;}