Variable:预定义变量
@width:10px;
@height:@width+10px;
#header{
width:@width;
height:@height;
}
output(输出):
#header{
width:10px;
height:20px;
}
Mixins 不需要每个地方都写全路径(通过继承关系)
#button{
background-color:#fff;
border-radius:7px;
}
#sbutton{
width:150px;
height:80px;
#button;
}
output(输出):
#button{
background-color:#fff;
border-radius:7px;
}
#sbutton{
width:150px;
height:80px;
background-color:#fff;
border-radius:7px;
}
Function:
#button(@width:150px){
background-color:#fff;
border-raduis:7px;
width:@width;
}
#sbutton{
height:80px;
#button;
}
#mbutton{
height:120px;
#button;
}
output(输出):
#sbutton{
height:80px;
background-color:#fff;
border-radius:7px;
width:150px;
}
#mbutton{
height:120px;
background-color:#fff;
border-radius:7px;
width:150px;
}
Nesting:修改时会有元素之间的继承关系
@color:blue;
ul{
color:red;
li{
color:yellow;
}
}
output(输出):
ul{
color:red;
}
ul li{
color:yellow;
}
Scope:变量有效问题
@color:blue;
ul{
@color:white;
color:red;
li{
color:@color;
}
}
output(输出):
ul{
color:red;
ul li{
color:white;
}
}
对比:
@color:blue;
ul{
@color:white;
color:red;
}
li{
color:@color;
}
output(输出):
ul{
color:red;
}
li{
color:blue;
}
Operations:相对变化
注意:+、-、*、/均可
@color:blue;
@size:14px;
ul{
@color:white;
color:red;
li{
color:@color;
font-size:@size+2;
}
}
output(输出):
ul{
color:red;
}
ul li{
color:white;
font-size:16px;
}
eg2:
@var:#ff5500;
div{
background-color:@var;
&:hover{
background-color:fadeout(@var,20%);
}
}
output(输出):
div{
background-color:#ff5500;
}
div:hover{
background-color:rgba(255,85,0,0.8);
}