//引用其他less文件进来
//@import "My-less";
//!import 用法：优先级最高
.test_04{
width: 20px !important;
}
//定义变量
@test_width: 500px;
//混合
.border(@border_width:5px) {
border:solid @border_width #FFFFFF;
}
//圆角less函数
.border_radius(@radius:5px,@border_width:5px){
.border(@border_width:5px);
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
body{
padding-top: 280px;
padding-left: 180px;
background: #333333;
width: @test_width;
.border_radius(10px,3px);
}
#box-1 {
.sanjiao(top,10px,#fff);
}
////三角
//.sanjiao(@sanjiaoWidth:10px) {
// width: 0px;
// height: 0px;
// overflow: hidden;
// border-width: @sanjiaoWidth;
// border-color: transparent transparent transparent red;
// //相应的上下左右的颜色
// //border-style: solid;
// border-style: dashed dashed dashed solid;
// //兼容IE6的写法
//}
//匹配模式
//三角形函数
.sanjiao(@sanjiaoFX:top,@w:5px,@c:#ccc){
.triangle(@sanjiaoFX,@w,@c);
}
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
width: 0px;
height: 0px;
overflow: hidden;
}//@_始终需要带上
//定位
.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(f){
position: fixed;
}
//运算
@test_color: #c2c2c2;
#box-2 {
background: @test_color - 160;
#box-1;
}
//嵌套
#a1{
width: 300px;
background: #444;
li{
height: 600px;
line-height: 600px;
&:hover{
color:red;
}
//& 当前选择器
}
span{
}
a{
&:hover{
color:red;
.border_arg();
}
}
}
//@arguments;
//包含所有传递进来的参数，等于引用了所有传递进来的参数
.border_arg(@w:5px,@c:red,@xx:solid){
border: @arguments;
// border: @xx,@w,@c;
}
//避免编译的写法
//~''
.test_03{
width:~'calc(300px - 30px)';
}