Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
    Less 可以运行在 Node 或浏览器端。

    1. @import "color";
    2. /* 1.声明变量 */
    3. @fontColor:"#c20c0c";
    4. @bgColor:"#333";
    5. @width:0.5;
    6. /* 
    7. 4.Maps
    8. */
    9. #colors(){
    10.     primaryColor:#337ab7;
    11.     successColor:#5cb85c;
    12.     infoColor:#5c5c5c;
    13.     dangerColor:#d9534f;
    14. }
    15. body{
    16.     @bgColor:"#999";
    17.     background:@bgColor;
    18.     color: #colors[successColor];
    19. };
    20. /* 2.mixin 一大段复用的代码 */
    21. .wh(@w:100px,@h:100px){
    22.     width: @w;
    23.     height: @h;
    24. };
    25. .three{
    26.     width: percentage(@width);
    27. }
    28. .one{
    29.     .wh();
    30.     /* 3.嵌套 */
    31.     &:hover{
    32.         color: red;
    33.     }
    34.     .child{
    35.         border: 1px solid #333;
    36.     }
    37. };
    38. .two{
    39.     .wh(200px,200px)
    40. }
    41. .four:extend(.two){
    42.     border: 1px solid #333;
    43. }
    44. .gen-col(@n) when(@n>0){
    45.     .col-@{n}{
    46.         width: 100%/12*@n;
    47.     }
    48.     .gen-col(@n - 1);
    49. }
    50. .gen-col(12)

    对应的css

    1. body {
    2.   background: "#999";
    3.   color: #5cb85c;
    4. }
    5. .three {
    6.   width: 50%;
    7. }
    8. .one {
    9.   width: 100px;
    10.   height: 100px;
    11. }
    12. .one:hover {
    13.   color: red;
    14. }
    15. .one .child {
    16.   border: 1px solid #333;
    17. }
    18. .two,
    19. .four {
    20.   width: 200px;
    21.   height: 200px;
    22. }
    23. .four {
    24.   border: 1px solid #333;
    25. }