Less是什麼

Less是一種動態的樣式語言，Less擴充套件了CSS的動態行為，比如說，設定變數（variables）、混合書寫模式（mixins）、操作（operations）和功能（functions）等等，而且Less使用了現有的CSS語法。

引用

官網: http://lesscss.org/

中文網站: http://lesscss.cn/

https://less.bootcss.com/

在開發時一般編寫.less檔案，用link標籤引入並設定rel為stylesheet/less，然後在其下用script標籤引入less.js檔案。

需要注意的是，link 標籤一定要在 Less.js 之前引入，並且 link 標籤的 rel 屬性要設定為stylesheet/less。

開發階段這樣用：

    <!-- html中 -->
    <link href="../less/study.less" rel="stylesheet/less" />
    <script src="../js/less.min.js"></script>

在生產階段，一般用npm下載Less工具包，將.less檔案轉換成.css檔案。

在生產階段時，要先將.less檔案轉成.css檔案（主要是為了效能，當然不轉也是可以的。）

    // 在命令列工具中（首先要安裝npm，或者是安裝有Node環境，因為Node環境中預設帶有npm了）
    npm install less -g //如果已經安裝過了就略過這一條命令
    cd xxx  // 進入你的.less檔案目錄
    lessc study.less study.css // 這樣就轉換成功了
 

less註釋


//只會在less中顯示
/* 就會在less和css中顯示*/

less變數

less變數@自定義名字:變數如@color:blue;

1.普通的屬性值用@color   
例子
      #app {
      color:@color
      }
編譯後
      #app {
      color:blue
      }

定義選擇器或屬性@m:margin使用時@{m}:10px----很少這樣用

2.（不常用）屬性名稱@m:margin;
例子
* {
@{m}:0
}
編譯後
* {
margin:0

}

3. （不常用）選擇器@selector:#app;
例子
@{selector}:{
color:red
}
編譯後
#app:{
color:red
}

4.變數可用於儲存圖片的URL、預設值、拼接 #app_變數、 +-*/ 等。

5.less延時載入 ,這裡的@var時屬性值

less巢狀

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

巢狀則是用類似html的組織樹的形式編寫樣式程式碼，使程式碼看起來立體，一目瞭然。

    // 假設有以下css程式碼
    #header {
      color: black;
    }
    #header .navigation {
      font-size: 12px;
    }
    #header .logo {
      width: 300px;
    }
    
    // 則他們可以像這樣寫
    #header {
        color: black;
        .navigation {
            font-size: 12px;
        }
        .logo {
            width: 300px;
        }
    }
    (&表示當前選擇器的父級）：
    // 又比如像本文開始部分寫的程式碼
    // 當前元素的偽類則用&連線。
    .div1{
        ...
        &:hover{
            background-color: @hover-color;
            cursor: pointer;
        }
    }
    // 最終轉換成
    .div1 {
      ...
    }
    .div1:hover {
      background-color: yellow;
      cursor: pointer;
    }
    

@規則巢狀和冒泡

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

.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;
  }
}

編譯為：

.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;
  }
}

less混合（Mixins）

混合（Mixin）是一種將一組屬性從一個規則集包含（或混入）到另一個規則集的方法。假設我們定義了一個類（class）

混合（或者說是混入，以下稱混合），就是類似元件的東西，可以定義最小的樣式，然後在其他地方多次引用（去掉了很多重複的勞動）。

1.普通混合   
 <!-- html檔案 -->
    <div class="div1"> 我是學習Less的div </div>
    
    // less內容（注意看 引用 .border的地方）
    @border-color: seagreen;
    .border{
        border-top: solid 2px @border-color;
        border-bottom: solid 2px @border-color;
    }
    .div1{
        background-color: @nice-blue;
        padding: @div-padding;
        .border;  // 這部分就是混合的內容!! 也可以用.border(); 這樣子來表示。
    }
    
    // 實際轉換內容
    .border {
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }
    .div1 {
      background-color: #5B83AD;
      padding: 20px;
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }

2. 不帶輸出的混合

3.帶引數的混合

4.帶引數切有預設值的混合

5. 帶多個引數的混合
6.命名引數
當形參與實參個數不一致時,可使用命名引數

7.匹配模式
8.arguments變數

運算

即可以進行簡單的四則運算，和css中的calc()函式相應的能力，可以運算單位和顏色等。（總體來說，還是儘可能進行顯示轉換單位後進行計算，以防止不必要的錯誤產生。）

    // 換算單位
    // numbers are converted into the same units（數字會被轉換成相應的單位再繼續計算）
    @conversion-1: 5cm + 10mm; // result is 6cm
    @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm （這裡的2會被轉成2cm後在進行計算）

    // conversion is impossible
    @incompatible-units: 2 + 5px - 3cm; // result is 4px（這裡的2會被轉成2px，3cm會被轉成3px後在進行計算）

    // example with variables
    @base: 5%;
    @filler: @base * 2; // result is 10%
    @other: @base + @filler; // result is 15%
    
    // 換算顏色
    @color: #224488 / 2; //results in #112244
    background-color: #112244 + #111; // result is #223355

calc() 特例

為了與 CSS 保持相容，calc()並不對數學表示式進行計算，但是在巢狀函式中會計算變數和數學公式的值。

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

函式（Functions）

Less 內建了多種函式用於轉換顏色、處理字串、算術運算等。這些函式在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中提供了這樣的功能（不要和css的名稱空間搞混了）

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

現在，如果我們希望把.button類混合到#header a中，我們可以這樣做：

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

注意：如果不希望它們出現在輸出的 CSS 中，例如#bundle .tab，請將()附加到名稱空間（例如#bundle()）後面。

對映（Maps）

從 Less 3.5 版本開始，你還可以將混合（mixins）和規則集（rulesets）作為一組值的對映（map）使用。

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

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

輸出符合預期

.button {
  color: blue;
  border: 1px solid green;
}

作用域（Scope）

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

即是:和js的作用域一樣，即內部的變數可以覆蓋全域性變數；或者是相同的變數，後面的值會覆蓋前面宣告的。

  less內容
    @var: red;
    #page {
      @var: white;
      #header {
        color: @var; // white
      }
    }

匯入（Importing）

“匯入”的工作方式和你預期的一樣。你可以匯入一個 .less 檔案，此檔案中的所有變數就可以全部使用了。如果匯入的檔案是 .less 副檔名，則可以將副檔名省略掉：

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