less

开头先引用官方的语段话：Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

接下来我总结一些常用的用法：变量、混合、嵌套、运算、函数

1. 变量（Variables）

和js中定义变量一样，less也有自己定义变量所要用到的定义符：@

@color: aqua;
@wiidth: 100px;
@height: 100px;

.box{
  width: @wiidth;
  height: @height;
  border: 1px solid @color;
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid aqua;
}

2.混合（Mixins）

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

第一种用法：

.bordered {
  color: aqua;
  font-size: 16px;
  border: 1px solid aqua;
}

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

.box2{
  width: 100px;
  height: 100px;
  .bordered()
}

.box3{
  width: 200px;
  height: 200px;
  .bordered()
}

编译为：

.box2 {
  width: 100px;
  height: 100px;
  color: aqua;
  font-size: 16px;
  border: 1px solid aqua;
}
.box3 {
  width: 200px;
  height: 200px;
  color: aqua;
  font-size: 16px;
  border: 1px solid aqua;
}

第二种用法：继承（extend）

.public{
  width: 100px;
  height: 100px;
}

.box4{
  &:extend(.public);
}

.box5{
  &:extend(.public);
}

编译为：

.public,
.box4,
.box5 {
  width: 100px;
  height: 100px;
}

对比第一种用法，不难看出，相当于把所有样式都复制了一份过来，这样在编译后css中会存在大量冗余的css代码，为了解决这个问题，可以使用第二种继承的写法。

3.嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header { 
  color: black; 
} 
#header .navigation { 
  font-size: 12px; 
} 
#header .logo { 
  width: 300px; 
}

使用less语言我们可以这样书写样式代码

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width:300px
  }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix { 
  display: block; 
  zoom: 1; 
  
  &:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
  } 
}

4.运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

@base: 5%; 
@filler: @base * 2;
@other: @base + @filler; 

color: #888 / 4; 
background-color: @base-color + #111; 
height: 100% / 2 + @filler;

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

@color: (#224488 / 2); // 结果是 #112244 
background-color: #112244 + #111; // 结果是 #223355

5.函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 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); 
}

额外再提一下循环吧，less里面也是可以写循环语句的，主要是使用递归实现的

.loop(@n, @i: 1) when (@n > 0){
  .loop(@n - 1);
  &:nth-child(@{n}){
    width: 100px * @n;
  }
}

ul{
  .loop(5);
}

编译为：

ul:nth-child(1) {
  width: 100px;
}
ul:nth-child(2) {
  width: 200px;
}
ul:nth-child(3) {
  width: 300px;
}
ul:nth-child(4) {
  width: 400px;
}
ul:nth-child(5) {
  width: 500px;
}

less 用法总结

less

1. 变量（Variables）

2.混合（Mixins）

3.嵌套（Nesting）

4.运算（Operations）

5.函数