less基本使用
- less可以定义一些常量, 可以让css处理方法, 进行选择器嵌套.
- 浏览器是不识别less的,只识别css
- 使用less时,要编译成css,才能运行
- 使用软件kola,将less转换成css.
less用法
1.定义常量： @常量名称：值
<div class="box">sk666</div>
<div class="box2">aaaa</div>
.red{
color:red;
border: 4px solid orange;
}
.blue{
color:blue;
}
//1.常量
@width:200px;
.box{
width: @width;
height: @width;
background: #000;
.red;//设置文字颜色红色
}
2.定义方法
.bd(){
}
.box2{
.box;
.bd();
}
- 2.2 方法传参, 参数个数和类型要匹配
- @color, @color2方法形参
.color(@color, @color2){
color:@color;
border: 6px solid @color2;
}
.box{
width: @width;
height: @width;
background: #000;
.red;//设置文字颜色红色
.color(red, yellow);
}
- 2.3 根据传入参数, 调用不同方法, 并且可以给形参添加默认值
.color(r, @color:orange, @color2:purple){
color:@color;
border-right: 6px solid @color2;
}
.color(l, @color:red, @color2:blue){
color:@color;
border-left: 6px solid @color2;
}
.box{
width: @width;
height: @width;
background: #000;
.red;//设置文字颜色红色
.color(l);
}
3.嵌套使用
.box2{
.box;
ul{
li{
&:hover{//&: 上一级标签
color:#fff;
}
}
}
}
