Less實戰（四）：嵌套（Nesting）+ 運算（Operations）+ 轉義（Escaping）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結合使用的能力。

嵌套（Nesting）

index.less代碼 >>>

#sex{
    color: red;
}

#sex .man{
    color: blue;
}

#sex .woman{
    color: pink;
}

改爲嵌套後 >>>

#sex {
    color: red;
    .man {
      color: blue;
    }
    .woman {
      color: pink;
    }
  }

編譯爲css後 >>>

#sex {
  color: red;
}
#sex .man {
  color: blue;
}
#sex .woman {
  color: pink;
}

---

@規則嵌套和冒泡

@ 規則（例如 @media 或 @supports）可以與選擇器以相同的方式進行嵌套。@ 規則會被放在前面，同一規則集中的其它元素的相對順序保持不變。這叫做冒泡（bubbling）。

index.less代碼 >>>

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

編譯爲css後 >>>

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

---

運算（Operations）

就是日常的基本操作，什麼加減乘除之類的，計算的結果以最左側操作數的單位類型爲準。如果單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。

index.less代碼 >>>

@width:10px;

@second-width:@width+20px;
@third-width:@width/2;
.demo1{
  width: @second-width;
}

.demo2{
  width: @third-width;
}

編譯成css後 >>>

.demo1 {
  width: 30px;
}
.demo2 {
  width: 5px;
}

---

轉義（Escaping）

轉義（Escaping）允許你使用任意字符串作爲屬性或變量值。任何 ~“anything” 或 ~‘anything’ 形式的內容都將按原樣輸出，除非 interpolation。

index.less代碼 , 不加 ~ 的情況 >>>

@min768: "(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

編譯後，爆紅報錯 >>>

---

index.less代碼 >>>

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

寫成這樣也行 >>>

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

編譯完成後 , 完美成功 >>>

---

下一章進行less學習最後的講解，有些太深入的需要去官方看文檔，其實平時開發自己的less也不一定全部逗得用上，只要能高效解決問題實現目標的就是好辦法