到這一篇，less文檔的語言特性部分就全部完成了，閱讀過程中，依舊建議結合官網的原文進行理解并且在電腦里面安裝less，跟著內容自己試試，看看編譯結果會更加直觀的理解，也可以多多嘗試加深理解。接下來的部分就是less的函數手冊，函數手冊大概下周會出，爭取不拖延，不會像兩篇這樣說好上周末出的結果拖到現在，會踏實的每天都寫一些的。

循環（Loop）

在less中一個mixin可以調用其本身。當結合了guards表達式和模式匹配后，這樣一個遞歸的mixins可以用來創建各種各樣的迭代/循環的結構。

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 下一次迭代
  width: (10px * @counter); // 每次迭代的代碼
}

div {
  .loop(5); //啟動循環
}

編譯為：

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

使用遞歸循環的一般的例子是生成CSS的格網類（grid classes）：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

編譯為：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

合并（Merge）

合并屬性

合并特性允許將多個屬性的值聚合到一個使用逗號或者空格分隔的單屬性列表中。merge對于像background和transform屬性來說是非常有用的。

逗號（comma）

發布于v1.5.0

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

編譯為：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

空格（space）

發布于v1.7.0

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

編譯為：

.myclass {
  transform: scale(2) rotate(15deg);
}

為了避免各種非故意的連接，merge要求一個明確的 “+”或者“+_”作為標記在每個需要連接的聲明中。

父代選擇器（parent selectors）

&運算符代表了嵌套中的父代選擇器，在將一個修改過的類或者偽類加到一個已存在的選擇器中的情況下是很常用的。

a {
  color: blue;
  &:hover {
    color: green;
  }
}

編譯為：

a {
  color: blue;
}

a:hover {
  color: green;
}

注意到如果沒有&，上面的例子將不會產生a:hover的樣式（會變成一個在<a>標簽里面的可以匹配任意懸停元素的后代選擇器），那就不是我們想要的嵌套的：hover的偽類選擇器。
“父代選擇器”運算符具有各種用途，你可以將嵌套規則的選擇器以非默認方式的其他方式組合在一起。另外一種典型用法就是產生重復的類名：

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

編譯為：

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

多個&

&可以在一個選擇器中出現多次，這使得可以重復地引用父代選擇器而不重復它的名字。

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

編譯為：

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

注意到 & 代表了所有的父代選擇器（不是最近的父代選擇器）：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

編譯為：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

改變選擇器的順序

可以使當前選擇器比其父代選擇器優先，這個可以通過將&放在當前選擇器的后面來實現。當使用Modernize時，您可能希望根據支持的特性指定不同的規則:

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

" .no-borderradius & " 選擇器 將會使" .no-borderradius "選擇器比其父代選擇器" .header .menu "優先。從而會編譯成" .no-borderradius .header .menu "

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

組合遍歷（Combinatorial Explosion）

&可以生產所有可能的選擇器排列，這些選擇器在一個由逗號分隔的列表中。

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

這產生了指定元素所有可能的組合:

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}