Less 快速入門

官網文檔（中文）：
Less 安裝
Less 快速入門
Less 函數手冊

一、less.js引用方法：

在瀏覽器中使用Less.js是最簡單的入門方式，並且使用Less進行開發很方便。（但是在生產中，當性能和可靠性很重要時，我們建議使用Node.js或許多可用的第三方工具之一進行預編譯，本文暫時不寫這方面內容）

• 1.首先，將自己建的styles.less樣式表的rel屬性設置爲“ stylesheet/less”；
• 2.接下來，引用less.js，注意該引用要放至樣式表之後

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

二、用法

• 1.變量（Variables）

  使用@定義變量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

• 2.混合（Mixins）

  Less 允許我們將常用的樣式，打包封裝到 class 或 id 選擇器中，其它地方可以方便的引用

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

如果只用於樣式打包，而不出現在css代碼中，那麼請在它的後面加上()，且支持傳入參數

#bg-item(@widthSize:300px,@heightSize:100px){
  background: #fff;
  color: #0b2e13;
  display: inline-block;
  width: @widthSize;
  height: @heightSize;
}

.box1{
  #bg-item(500px,200px);
}

.box2{
  #bg-item;
}

• 3.嵌套（Nesting）

  嵌套可用於以與頁面的HTML結構相匹配的方式構造樣式表，同時減少了衝突的機會

ul{
  @textColor: #666;
  background: @color-f;

  li{
    color: @textColor;
  }
}

• 4.運算（Operations）

  算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算

@div-width: 300px;
@div-height: 100px;
@color-c: #03A9F4;

#contentBox(@height:100px){
  display: inline-block;
  color: @color-f;
  height: @height;
}

.content1{
  width: @div-width;
  background: @color-c;
  #contentBox(@div-height*2);
}

.content2{
  width: @div-width + 200;
  background: @color-c + 20;
  #contentBox();
}

calc() 特例

爲了與 CSS 保持兼容，calc() 並不對數學表達式進行計算，但是在嵌套函數中會計算變量和數學公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 結果是 calc(50% + (25vh - 20px))

• 5.轉義（Escaping）

  轉義允許你使用任意字符串作爲屬性或變量值

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    width: 200px;
    height: 200px;
    background: #719df7;
  }
}

編譯爲：

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

注意，從 Less 3.5 開始，可以簡寫爲：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    width: 200px;
    height: 200px;
    background: #719df7;
  }
}

• 6.函數（Functions）

  Less中有許多函數，詳見 Less 函數手冊

  例如，降低顏色透明度的函數fadeout()

.content1:hover{
  background: fadeout(@color-c,50%);
}

• 7.命名空間和訪問符

  有時，出於組織結構或僅僅是爲了提供一些封裝的目的，我們希望對混合（mixins）進行分組

  可以將一些混合（mixins）和變量置於 #bundle 之下，爲了以後方便重用或分發

#bundle() {
  .button() {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover() {
      background-color: white;
    }
  }
  .tab() { ... }
  .citation() { ... }
}

#header a {
  #bundle.button();  // 還可以書寫爲 #bundle > .button 形式
}

• 8.映射（Maps）

  從 Less 3.5 版本開始，可以將混合和規則集作爲一組值的映射使用

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

• 9.作用域（Scope）

  Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級作用域繼承

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

與 CSS 自定義屬性一樣，混合（mixin）和變量的定義不必在引用之前事先定義。因此，下面的 Less 代碼示例和上面的代碼示例是相同的：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

• 10.註釋（Comments）

  塊註釋和行註釋都可以使用

/* 一個塊註釋
 * style comment! */
@var: red;

// 這一行被註釋掉了！
@var: white;

• 11.導入（Importing）

  Less文件可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉

@import "library"; // library.less
@import "typo.css";