什么是 CSS 预处理器？
Less 是CSS预处理器之一，它能让你更好的、更轻松的工作。
定义：
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数 等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
比较常见 CSS 预处理器语言：
LESS
Sass（SCSS）
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS
到目前为止，在众多优秀的 CSS 预处理器语言中就属 Less、 Sass 和 Stylus 最优秀，论坛讨论的也多，对比的也多。
作为CSS的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。这使学习“轻而易举”变得轻而易举，并且如果有疑问，可以让您回到普通的CSS。
Variables
这些是不言自明的：
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
输出：
#header {
color: #6c94be;
}
请注意，变量实际上是“常量”，因为它们只能定义一次。
Mixins
混合是一种将一组属性从一个规则集中包含（“混入”）到另一个规则集中的方式。让我们来看一下下面的例子：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们想在其他规则集中使用这些属性。好吧，我们只需要在需要属性的类的名称中输入，如下所示：
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered该类的属性现在将同时出现在#menu a和中.post a。（请注意，您也可以将其#ids用作mixin。）
嵌套规则
更少使您能够使用嵌套而不是级联或与级联结合使用。假设我们有以下CSS：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在Less中，我们也可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成的代码更加简洁，并且模仿了HTML的结构。
您也可以使用此方法将伪选择器与mixins捆绑在一起。这是经典的clearfix hack，改写为mixin（&代表当前的选择器父对象）：
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
Operations
算术运算+，-，*，/可以在任意数量，颜色或可变的操作。如果可能的话，数学运算会在加，减或比较它们之前考虑单位并转换数字。结果具有最左侧明确说明的单位类型。如果转换是不可能的或没有意义，则将忽略单位。不可能的转换示例：px转换为cm或rad转换为％。
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
乘法和除法不会转换数字。在大多数情况下，这是没有意义的-长度乘以长度即可得出一个区域，而css不支持指定区域。Less将按原样对数字进行运算，并为结果指定明确声明的单位类型。
@base: 2cm * 3mm; // result is 6cm
颜色分为红色，绿色，蓝色和Alpha尺寸。该操作分别应用于每个颜色尺寸。例如，如果用户添加了两种颜色，则结果的绿色尺寸等于输入颜色的绿色尺寸之和。如果用户将颜色乘以数字，则每个颜色尺寸都会相乘。
注意：未定义对alpha的算术运算，因为对颜色的数学运算没有标准的约定含义。不要依赖当前的实现，因为它可能会在以后的版本中更改。
对颜色进行的操作始终会产生有效的颜色。如果结果的某个颜色尺寸最终大于ff或小于00，则该尺寸将四舍五入为ff或00。如果alpha最终大于1.0或小于0.0，则将alpha舍入为1.0或0.0。
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
Escaping
转义允许您将任意字符串用作属性或变量值。除插值外，里面的任何东西~"anything"或 ~'anything’按原样使用。
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
结果是：
.weird-element {
content: ^//* some horrible but needed css hack;
}
Functions
Less提供了多种功能，可以转换颜色，操纵字符串和进行数学运算。它们在功能参考中有完整记录。
使用它们非常简单。下面的示例使用百分比将0.5转换为50％，将基本色的饱和度增加5％，然后将背景色设置为变亮25％并旋转8度的背景色：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}