使用less编写css

css 预处理是一种语言为css增加了一些编程的特征，并且无需考虑浏览器的兼容性，你可以在你的css样式中使用变量，简单的逻辑处理，甚至函数。
目前比较普通的是这三款预处理架构、分别是less，sass，stylus。
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

优势
1.可以运用变量
@width:300px;
@fonts:12px bold "宋体,Verdana";
.block-header{
color:#5c5c5c;
.elem-title{
font:@fonts;
width:@width;
}
.elem-content{
width:@width;
height:300px;
}
}
.block-footer{
font:@fonts;
width:@width + 100px;
}
最后编译出来的css是这样
.block-header {
color: #5c5c5c;
}
.block-header .elem-title {
font: 12px bold "宋体,Verdana";
width: 300px;
}
.block-header .elem-content {
width: 300px;
height: 300px;
}
.block-footer {
font: 12px bold "宋体,Verdana";
width: 400px;
}
2.使用嵌套语法
.TopBar {
padding: 14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
.ddColor {
color :#fff;
a {
text-decoration:none;
&:hover {
border-width: 1px;
}
}
}
}
最后编译出来的css是这样
.TopBar {
padding:14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
}

.TopBar .ddColor {
color:#fff;
}
.TopBar .ddColor a {
text-decoration: none;
}
.TopBar .ddColor a:hover {
border-width: 1px;
}
3.运算符
4.处理浏览器兼容
.border-radius(@values){
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
@border-raduis(10px);
}
最后编译出来的css是这样
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}