一、为什么使用less

1.Less

是一个CSS预处理器，CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS,使 CSS 更易维护和扩展。

2.示例Less的使用

2.1变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

less源码

#header {
    color: @color;
}
h2 {
    color: @color;
}

less编译后

color: #4D926F;
}
h2 {
    color: #4D926F;
}

2.2混合（Mixins）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

less源码

.rounded-corners (@radius: 5px) { 
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -ms-border-radius: @radius;
      -o-border-radius: @radius;
      border-radius: @radius;
}
#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

less编译后

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}