Less 常用基础知识

LESS 中的注释 　　也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。 　　也可以使用// 注释 不会被编译的 变量 　　声明变量的话一定要用@开头 例如：@变量名称：值；

　　@test_width:300px; 　　.box{ 　　　　　　width:@test_width; 　　　　　　height:@test_width; 　　　　　　background-color:yellow; 　　　　} 混合-(Mixin） 　　混合(mixin)变量 　　　　例如： .border{border:solid 10px red} 　　　　.box{ 　　　　　　width:@test_width; 　　　　　　height:@test_width; 　　　　　　background-color:yellow; 　　　　　　.border; 　　　　} 　　带参数的混合 　　　　.border-radius(@radius){css 代码} 　　　　可认定默认值 　　　　.border-radius(@radius:5px){css 代码} 　　混合-可带的参数 　　　　.border_02(@border_width){ 　　　　　　border:solid yellow @border_width; 　　　　} 　　　　.test_hunhe{ 　　　　　　.border_02(30px); 　　　　} 　　混合 -默认带值 　　　　.border_03(@border_width:10px){ 　　　　　　　　border:solid green @border_width; 　　　　} 　　　　.test_hunhe_03{ 　　　　　　.border_03(); 　　　　} 　　　　.test_hunhe_04{ 　　　　　　.border_04(20px); 　　　　} 　　混合的例子 　　　　.border_radius(@radus:5px){ 　　　　　　　　-webkit-border-radius:@radius; 　　　　　　　　-moz-border-radius:@radius; 　　　　　　　　border-radius:@radius; 　　　　　　} 　　　　.radius_test{ 　　　　　　width:100px; 　　　　　　height:40px; 　　　　　　background-color：green; 　　　　　　.border_radius(); 　　　　} 匹配模式 　　　　　　.sanjiao{ 　　　　　　　　width:0; 　　　　　　　　height:0; 　　　　　　　　overflow:hidden; 　　　　　　　　border-width:10px; 　　　　　　　　border-color:transparent transparent red transparent; 　　　　　　　　border-style:dashed dashed solid dashed; 　　　　　}

　　　　.triangle(top,@w:5px,@c:#ccc){ 　　　　　　　　　　　　border-width:@w; 　　　　　　　　　　　　border-colo:transparent transparent @c transparent 　　　　　　　　　　　　border-style:dashed dashed solid dashed; 　　　　　　} 　　　　.triangle(bottom,@w:5px,@c:#ccc){ 　　　　　　　　　　　　border-width:@w; 　　　　　　　　　　　　border-colo:@c transparent transparent transparent 　　　　　　　　　　　　border-style:solid dashed dashed dashed; 　　　　　　} 　　　　.triangle(left,@w:5px,@c:#ccc){ 　　　　　　　　　　border-width:@w; 　　　　　　　　　　border-colo: transparent @c transparent transparent 　　　　　　　　　　border-style: dashed solid dashed dashed; 　　　　　　} 　　　　.triangle(right,@w:5px,@c:#ccc){ 　　　　　　　　　　border-width:@w; 　　　　　　　　　　border-colo: transparent transparent transparent @c; 　　　　　　　　　　border-style: dashed dashed dashed solid; 　　　　　　} 　　　　.trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。 　　　　　　　　　　width:0; 　　　　　　　　　　height:0; 　　　　　　　　　　overflow:hidden; 　　　　　　} 　　　　.sanjiao{ 　　　　　　.trangle(top,100px); 　　　　　　} 　　// 匹配模式- 定位 　　　　.pos(r){ 　　　　　　position:relative; 　　　　} 　　　　.pos(a){ 　　　　　　position:absolute; 　　　　} 　　　　.pos(f){ 　　　　　　position:fixed; 　　　　} 运算 　　@test_01:300px; 　　.box_02{ 　　　　width:@test_01 +20; 　　} 　　.box_02{ 　　　　width:@test_01 -20; 　　} 　　.box_02{ 　　　　width:(@test_01 20) *5; 　　　　color:#ccc -10; 　　} 嵌套： 　　.list{ 　　　　　　width:600px; 　　　　　　margin30px auto; 　　　　　　padding:0; 　　　　　　list-style:none; 　　　　　　li{ 　　　　　　　　height:30px; 　　　　　　　　line-height:30px; 　　　　　　　　background-color:pink; 　　　　　　　　margin-bottom:5px; 　　　　　　} 　　　　　　a{ 　　　　　　　　float:left; 　　　　　　　　&hover{ 　　　　　　　　color:red; //& 代表他的上一层选择器。 　　　　　　　　} 　　　　　　} 　　　　} @arguments 变量 　　　　@arguments 包含了所有的传递进来的参数。 　　　　　　.border_arg(@w:30px,@c:red,@xx:solid){ 　　　　　　.border:@arguments; 　　　　} 避免编译 　　.test_03{ 　　　　width:~'calc(300px -30)'; 　　}

!importan关键字 　　　　.test_important{ 　　　　　　.border_radius() !important; 　　}