1. less 中的嵌套

less 中的嵌套可以看成是模仿了 html 中的 DOM 结构。在 less 嵌套的过程中，& 发挥着至关重要的作用，表示的就是父级选择器本身。需要注意的是 & 的替换是字符串的替换，因此，需要先计算出 & 表示的值，然后再进行替换。

1.1 嵌套原因和 &

less 中的嵌套无疑是为了让样式的编写变得更加的简单。举个例子就可以清楚的看出区别：

less 复制代码

header logo:hover {
  color: red;
}

可以使用嵌套语法简单的写成：

less 复制代码

header {
 logo {
   &:hover {
     color: red;
   }
 }
}

可以说，less 的嵌套来源于 html 的嵌套结构；但 & 的出现使得 less 的嵌套规则远比 html 中的 DOM 元素的嵌套灵活多变。

1.2 & 写在后面

一般来说 & 要写在选择器最前面，但是也可以写在后面。此时，& 会将其之前的选择器提升到最前面：

less 复制代码

.ul {
  li {
    .conter & {
      color: red;
    }
  }
}

上面的写法等价于：

less 复制代码

.conter .ul {
  li {
      color: red;
  }
}

也就是说 .conter 后面的 & 指的是 ul 而不是其上级 li。

在使用 & 的时候一定要注意空格的使用，也就是上述代码中 .conter & 之间的空格可以是没有的，这种情况下，编译完成之后也没有空格，即：

less 复制代码

.ul {
  li {
    .conter & {
      color: red;
    }
  }
}
// 编译之后
.conter.ul {
  li {
    color: red;
  }
}

1.3 & & 表示的全相联

& & 表示所有父元素（多个父元素使用逗号相隔）组合的可能性，例如：

less 复制代码

.a, .b, .c {
  & & {
    color: red;
  }
}

相当于：

less 复制代码

.a .b,
.a .c,
.b .c {
  color: red;
}

注意这里的 & & 和 && 是两码事。当然 & & & 也是可以的。

2. less 中的运算

在 less 中，任何数值，颜色和变量都可以进行运算。less 会自动推断数值的单位，所以无需刻意加上单位。需要注意的是，运算符和值之间需要以空格分开，涉及优先级的时候需要用到括号 ()。

就是说，可以写出如下的代码：

less 复制代码

.wp {
  width: (450px - 50) * 2;
}

注意，只需要在运算符和数值之间加上空格就可以了。括号和数值，以及括号和运算符之间无需加上括号。

在 less 中，和颜色相关的运算要先转成 rgb 格式，也就是说 #000000 + 21 会变成 rgb(21,21,21) 转成 16 进制就是 #151515。这样的话如果加的数值超过 255 那么就会自动取上限值，例如 #000000 + 260 就会变成 #FFFFFF 。

但是，这样是不合法的：red - 25 ，需要改写成 rgb(255,0,0) - 25 就变成了 rgb(230,0,0)。

3. less 中的内置函数

常见的 less 中的内置函数有：rgb() blue()

例如：blue(#ffffff) 的结果为：255

less 中的内置函数罗列：

类型函数：
- isnumber(value)：判断是否为数字。
- isstring(value)：判断是否为字符串。
- isurl(value)：判断是否为URL。
- iscolor(value)：判断是否为颜色。
- isunit(value, unit)：判断value值是否为指定单位。
逻辑函数：
- if((condition), value1, value2)：判断函数，如果condition表达式为true，返回value1，否则返回value2。
- boolean(condition)：判断表达式condition的真假。
数学函数：
- ceil(value)：向上取整。
- floor(value)：向下取整。
- round(value)：四舍五入。
- percentage(value)：将浮点数转换成百分比的字符串。
- abs(value)：绝对值。
- sqrt(value)：平方根。
- pow(value, exponent)：乘方。
- min(value1, value2, ...)：取最小值。
- max(value1, value2, ...)：取最大值。
字符串函数：
- escape(str)：不带引号返回转移后的字符串，类似于url-encoding。
- e(str)：将字符串原样返回其内容，并不带引号。
- replace(str, pattern, replacement)：替换字符串中的文本。
列表函数：
- length(list)：获取列表的长度。
- extract(list, index)：获取列表中某一项的值，index表示选择列表中的某一项，注意下标是从1开始的。
其他函数：
- color(string)：可以将字符串类型颜色值转换为CSS可以识别的颜色值。
- unit(dimension, unit)：删除或更换单位。
- convert(value, unit)：将数字从一种单位转换到另一种单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个单位不兼容，则原样返回第一个参数。
- data-uri(mimetype, url)：将资源内联进样式表，如果开启了ieCompat选项并且资源太大，则会回退到直接使用url()。如果没有指定MIME，则会使用适当的MIME类型。

这些函数提供了在Less中进行各种计算和转换的能力，使得样式编写更加灵活和强大。

Less 嵌套和运算及内置函数

1. less 中的嵌套

1.1 嵌套原因和 &

1.2 & 写在后面

1.3 & & 表示的全相联

2. less 中的运算

3. less 中的内置函数