// less 文件
1 @charset ‘utf-8‘;2 //导入less文件3 @import "m";  4 //导入css文件:5 //注意导入的css文件位置与编译后css的位置是一致的6 @import (less) "b.css";

//m.less
1 .cless{2     @red:red;3     color:@red;4 }

//b.css
1 .bcss{2   color:#ccc;3 }

//编译后的css文件
@charset ‘utf-8‘;.cless {  color: #ff0000;}.bcss {  color: #ccc;}

 //less文件：
 1 @charset ‘utf-8‘; 2 /* 这是一个编译后看见的注释*/ 3 //这是一个编译后看不见的注释 4 @_width:300px; 5 @red:red; 6  7 .col{ 8   //可重复声明使用不影响外调用 9   @red:#ccc;10   color: @red;11 }12 .col2{13   color: @red;14 }

//less编译后的对应css文件：
@charset ‘utf-8‘;/* 这是一个编译后看见的注释*/.col {  color: #cccccc;}.col2 {  color: #ff0000;}

 1 .bord{ 2   border: 1px solid #000; 3 } 4 //例： 5 .box{ 6     width: @_width; 7     height: @_width; 8     background-color: @red; 9     .bord;//混合10 }

.bord {  border: 1px solid #000;}.box {  width: 300px;  height: 300px;  background-color: #ff0000;  border: 1px solid #000;}

1 .border_02(@border_width){2     border: solid yellow @border_width;3 }4 //例：5 .border_hunhe{6     width: @_width;7     height: @_width;8     .border_02(20px);9 }

.border_hunhe {  width: 300px;  height: 300px;  border: solid #ffff00 20px;}

 1 .border_03(@border_width:10px){ 2     border: @border_width solid green; 3 } 4 //例： 混合 不传值 5 .border_hunhe2{ 6     .border_03(); 7 } 8 //例： 混合 传值 9 .border_hunhe21{10     .border_03(12px);11 }

.border_hunhe2 {  border: 10px solid #008000;}.border_hunhe21 {  border: 12px solid #008000;}

 1 @bdr:10px; 2 .border_04(@border_width:@bdr){ 3     border: @border_width solid @red; 4 } 5 //例： 混合 不传值 6 .border_hunhe3{ 7     .border_04(); 8 } 9 //例： 混合 传值10 .border_hunhe31{11     .border_04(13px);12 }

.border_hunhe3 {  border: 10px solid #ff0000;}.border_hunhe31 {  border: 13px solid #ff0000;}

 1 /* 三角形 border */ 2 // 原文url:http://www.cnblogs.com/blosaa/p/3823695.html 3 //上 4 .trangle(top,@w:5px,@c:#ccc){ 5     border-width: @w; 6     border-color: transparent transparent @c transparent ; 7     border-style: dashed dashed solid dashed ; 8 } 9 //右10 .trangle(right,@w:5px,@c:#ccc){11     border-width: @w;12     border-color: transparent transparent transparent @c;13     border-style: dashed dashed dashed solid;14 }15 //下16 .trangle(bottom,@w:5px,@c:#ccc){17     border-width: @w;18     border-color:@c transparent transparent transparent;19     border-style:solid dashed dashed dashed;20 }21 //左22 .trangle(left,@w:5px,@c:#ccc){23     border-width: @w;24     border-color: transparent @c transparent transparent;25     border-style: dashed solid dashed dashed ;26 }27 //匹配通用格式28 .trangle(@_,@w:5px,@c:#ccc){29     width: 0;30     height: 0;31     overflow: hidden;32 }33 //例：34 .sanjiao{35   .trangle(right,50px);36 }37 38 //例：传入错误值39 .sanjiao1{40     .trangle(dsa,20px);41 }

/* 三角形 border */.sanjiao {  border-width: 50px;  border-color: transparent transparent transparent #cccccc;  border-style: dashed dashed dashed solid;  width: 0;  height: 0;  overflow: hidden;}.sanjiao1 {  width: 0;  height: 0;  overflow: hidden;}

 1 @w10:100px; 2 @h10:120; 3 .add{ 4   width: @w10 + 10; 5   height:@h10 - 10px; 6   color: #666 / 2;  //可用,不建议 7 } 8 .add2{ 9   width: @w10 + 12/2;10   height:(@h10 - 10)*2px;11 }12 13 .add3{14   width: @w10 + 10px;15   height: @h10/3*3px - 6+4;16 }

.add {  width: 110px;  height: 110px;  color: #333333;}.add2 {  width: 106px;  height: 220px;}.add3 {  width: 110px;  height: 118px;}

 1 ul{ 2   width: 100px; 3   //margin: 10px auto; 4   li{ 5     width: 100px; 6     float: left; 7     border-bottom: 1px solid #ccc /2; 8   } 9   a{10     width: 100px;11     color: red;12     display: block;13     //& 上一层选择器的名14     &:hover{15       color: blue;16     }17     span{18       font-weight: bold;19       font-size: 18px;20       float: right;21       color: #85ada7;22     }23   }24 }25  // $的用法26 .tit{27   width: 100px;28   &_n{29   width: 100px;30  }31 }

 1 ul { 2   width: 100px; 3 } 4 ul li { 5   width: 100px; 6   float: left; 7   border-bottom: 1px solid #666666; 8 } 9 ul a {10   width: 100px;11   color: red;12   display: block;13 }14 ul a:hover {15   color: blue;16 }17 ul a span {18   font-weight: bold;19   font-size: 18px;20   float: right;21   color: #85ada7;22 }23 .tit {24   width: 100px;25 }26 .tit_n {27   width: 100px;28 }

 1 .brd2(@c:#ccc,@w:10px,@solid:solid){ 2   border:@arguments; 3 } 4 .bor2{ 5   .brd2(); 6 } 7 //注意参数对应 8 .bor21{ 9   .brd2(red);10 }

.bor2 {  border: #cccccc 10px solid;}.bor21 {  border: #ff0000 10px solid;}

1 .wid{2   width:~‘calc(100px - 20px)‘;3 }

.wid {  width: calc(100px - 20px);}

1 .impor(@w:10px,@h:10px){2   width:@w;3   height:@h;4 }5 .im_a{6   .impor()!important;7 }

.im_a {  width: 10px !important;  height: 10px !important;}