html代码
<div class="div">
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="sj_top"></div>
<div class="sj_right"></div>
<div class="sj_down"></div>
<div class="sj_left"></div>
</div>
<ul class="list">
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
<li><a href="">嵌套规则</a></li>
</ul>
less代码
@charset "utf-8";
html,body{
background:#ccc;
}
.div{
.of-a;
}
.f-l{
float:left;
}
.f-r{
float:right;
}
.of-h{
overflow:hidden;
}
.of-a{
overflow:auto;
}
//变量声明方式: @变量名:值;
@test_width:100px;
.box,.box2,.box3{
width:@test_width;
height:@test_width;
background:green;
.f-l
}
.box{
.border_radius(10px);
.border
}
.box2{
.border_radius(10px);
.border2(2px)
}
.box3{
.border_radius(10px);
.border3
}
//混合
.border{border:solid pink;}
//混合带参数
.border2(@bd_width){
border:@bd_width solid yellow;
}
//混合 参数带默认值
.border3(@bd_width:1px){
border:@bd_width solid blue;
}
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
//用css写个三角型
.sanjiao{
.f-l;
overflow:hidden;
width:0;
height:0;
border-width:10px;
border-color:transparent transparent red transparent;
border-style:dashed dashed solid dashed
}
//匹配
.sj_top{
.sj(top,10px,red);
.pos(r)
}
.sj_right{
.sj(right,10px,red);
.pos(f)
}
.sj_down{
.sj(down,10px,red);
.pos(a)
}
.sj_left{
.sj(left,10px,red);
.pos(f)
}
//匹配写上下左右三角型
.sj(top,@width:10px,@color:#ccc){
border-width:@width;
border-color:transparent transparent @color transparent;
border-style:dashed dashed solid dashed
}
.sj(down,@width:10px,@color:#ccc){
border-width:@width;
border-color:@color transparent transparent transparent;
border-style:solid dashed dashed dashed
}
.sj(left,@width:10px,@color:#ccc){
border-width:@width;
border-color:transparent @color transparent transparent;
border-style:dashed solid dashed dashed
}
.sj(right,@width:10px,@color:#ccc){
border-width:@width;
border-color:transparent transparent transparent @color;
border-style:dashed dashed dashed solid
}
//第一个参数是固定的,当调用.sj的时候会自动添加到.sj里
.sj(@_,@width:10px,@color:#ccc){
width:0;
height:0;
overflow:hidden;
.f-l
}
//匹配例子2 定位
.pos(f){
position:fixed;
}
.pos(a){
position:absolute;
}
.pos(r){
position:relative;
}
//嵌套规则
.list{
border:1px solid #ccc;
list-style:none;
li{
a{
color:red;
//&代表他的上级元素
&:hover{
color:blue
}
}
}
}