Less(css扩展语言)

Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。也可以叫它css预处理语言;Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

来了解一下less的功能。

变量

定义变量:

@width: 10px;
@color:#f00;

使用：

div a{
 font-size:@width;
 color:@color;
}

编译为：

div a{
font-size:10px;
color:#f00;
}

混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#main a {
  color: #111;
  .bordered();
}

.head a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #main a 和 .head a 中了。

嵌套

嵌套（nesting）代替层叠或与层叠结合使用。

写法如下：

.loginBlock {
		h3 {
			font-size: 18px;
			margin-bottom