//引用其他less文件進來
//@import "My-less";
//!import 用法：優(yōu)先級最高
.test_04{
width: 20px !important;
}
//定義變量
@test_width: 500px;
//混合
.border(@border_width:5px) {
border:solid @border_width #FFFFFF;
}
//圓角less函數(shù)
.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;
//? //相應(yīng)的上下左右的顏色
//? //border-style: solid;
//? border-style: dashed dashed dashed solid;
//? //兼容IE6的寫法
//}
//匹配模式
//三角形函數(shù)
.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;
}
//& 當(dāng)前選擇器
}
span{
}
a{
&:hover{
color:red;
.border_arg();
}
}
}
//@arguments;
//包含所有傳遞進來的參數(shù)，等于引用了所有傳遞進來的參數(shù)
.border_arg(@w:5px,@c:red,@xx:solid){
border: @arguments;
//? border: @xx,@w,@c;
}
//避免編譯的寫法
//~''
.test_03{
width:~'calc(300px - 30px)';
}
