8. Less的使用
- Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
- Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。
- LESS由Alexis Sellier于2009年设计。LESS是一个开源。LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。
8.1 CSS的问题
- 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：
- CSS 需要书写大量看似没有逻辑的代码
- 不方便维护及扩展，不利于复用
- 对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，
- 造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
8.2 Less扩展CSS功能
8.2.1 变量（Variables）
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译后生成：
#header {
width: 10px;
height: 20px;
}
8.2.2 混合（Mixins）
- 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
- 如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
- 编译后css所示：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black
