Less css 使用方法

//引用其他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)';

}