1.下载koala客户端,可以设置语言
2.用koala打开一个有.less文件的文件夹,点击.less文件,点击执行方式,出现success表示绑定less文件成功,编译.less时会自动生成对应名称的css文件,html引入时引入css文件,维护时是维护less文件
3.less语法
1⃣️注释
/**/会在css中显示
//不会在css中显示
2⃣️变量
定义:@变量名:值 --------值不加‘’,像素记得带单位
使用:@变量名
3⃣️计算
定义 @h = 16px
使用:height:@h;
line-height:@h+5
4⃣️继承 &表示父级标签
.less文件
ul{
& li{
& span{
}
}
}
.css文件结果
ul { }
ul li { }
ul li span { }
5⃣️混合方法
eg1:不加括号(混合方法也会出现在css文件中)
.less文件
.bg{
background-color:red;
}
.box{
.bg;
width:100px;
height:100px;
}
.css文件
.bg{
background-color:red;
}
.box{
background-color:red;
width:100px;
height:100px;
}
eg2:加括号(混合方法不会渲染在css文件中)
.less文件
.bg(){
background-color:red;
}
.box{
.bg();
width:100px;
height:100px;
}
.css文件
.box{
background-color:red;
width:100px;
height:100px;
}
eg3:传参数
.less文件
.bg( @h,@w,@color:red){
background-color:red;
width:@w;
height:@h;
}
.box{
.bg(100px,50px);
}
.css文件
.box{
background-color:red;
width:100px;
height:50px;
}
eg4:获取全部参数
.less文件
.margin( @t,@r,@b,@l){
margin:@arguments;
}
.box{
margin(10px,15px,10px,15px);
}
.css文件
.box{
margin:10px 15px 10px 15px;
}
6⃣️匹配模式
▶️传参个数匹配
▶️根据传入的值匹配
.less文件
.border(top,@color){
border-top:1px solid @color;
}
.border(bottom,@color){
border-bottom:1px solid @color;
}
.border(@_,@color){
margin:10px
}
.div{
.border(top,#fff);
}
.css文件
.div{
border-top:1px solid @color;
margin:10px;
}
7⃣️媒体查询
.less文件
.content{
& .image{
@media screen and (max-width:370px){
}
}
}
.css文件
.content { }
.content .image { }
@media screen and (max-width:370px){
.content .image { }
}