LESS - 快速指南

LESS - 概述

LESS 是一種 CSS 預處理器，它能夠為網站提供可定製、可管理和可重用的樣式表。LESS 是一種動態樣式表語言，擴充套件了 CSS 的功能。LESS 也是跨瀏覽器友好的。

CSS 預處理器是一種指令碼語言，它擴充套件了 CSS 並被編譯成常規的 CSS 語法，以便您的 Web 瀏覽器可以讀取它。它提供了諸如變數、函式、混合宏和操作等功能，允許您構建動態 CSS。

為什麼要使用 LESS？

現在讓我們瞭解一下我們為什麼要使用 LESS。

LESS 支援更快、更輕鬆地建立更簡潔、跨瀏覽器友好的 CSS。
LESS 使用 JavaScript 設計，並且還建立為即時使用，編譯速度比其他 CSS 預處理器快。
LESS 以模組化的方式保持您的程式碼，這透過使其可讀和易於更改非常重要。
透過使用 LESS變數可以實現更快的維護。

歷史

LESS 由Alexis Sellier於 2009 年設計。LESS 是開源的。LESS 的第一個版本是用 Ruby 編寫的；在後來的版本中，Ruby 的使用被 JavaScript 替代了。

特性

可以用有組織的方式編寫更簡潔、更易讀的程式碼。
我們可以定義樣式，並且可以在整個程式碼中重用它。
LESS 基於 JavaScript 並且是 CSS 的超集。
LESS 是一種敏捷工具，可以解決程式碼冗餘問題。

優點

LESS 可以輕鬆生成跨瀏覽器有效的 CSS。
LESS 透過使用巢狀使您能夠編寫更好、更有條理的程式碼。
透過使用變數可以實現更快的維護。
LESS 使您能夠透過在規則集中引用它們來輕鬆地重用整個類。
LESS 提供了操作的使用，這使得編碼更快並節省了時間。

缺點

如果您不熟悉 CSS 預處理，則需要花費時間學習。
由於模組之間的緊密耦合，應付出更多努力來重用和/或測試相關模組。
與像 SASS 這樣的舊預處理器相比，LESS 的框架較少，SASS 包括Compass、Gravity和Susy框架。

LESS - 安裝

在本章中，我們將逐步瞭解如何安裝 LESS。

LESS 的系統要求

作業系統 - 跨平臺
瀏覽器支援 - IE（Internet Explorer 8+）、Firefox、Google Chrome、Safari。

LESS 的安裝

現在讓我們瞭解 LESS 的安裝。

步驟 1 - 我們需要NodeJs來執行 LESS 示例。要下載 NodeJs，請開啟連結https://nodejs.com.tw/en/，您將看到如下所示的螢幕 -

下載最新功能版本的 zip 檔案。

步驟 2 - 執行安裝程式以在您的系統上安裝Node.js。

步驟 3 - 接下來，透過 NPM（Node 包管理器）在伺服器上安裝 LESS。在命令提示符中執行以下命令。

npm install -g less

步驟 4 - 成功安裝 LESS 後，您將在命令提示符上看到以下行 -

`-- less@2.6.1
   +-- errno@0.1.4
   | `-- prr@0.0.0
   +-- graceful-fs@4.1.3
   +-- image-size@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `-- minimist@0.0.8
   +-- promise@7.1.1
   | `-- asap@2.0.3
   +-- request@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `-- lru-cache@4.0.0
   | |   +-- pseudomap@1.0.2
   | |   `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `-- readable-stream@2.0.6
   | |   +-- core-util-is@1.0.2
   | |   +-- inherits@2.0.1
   | |   +-- isarray@1.0.0
   | |   +-- process-nextick-args@1.0.6
   | |   +-- string_decoder@0.10.31
   | |   `-- util-deprecate@1.0.2
   | +-- caseless@0.11.0
   | +-- combined-stream@1.0.5
   | | `-- delayed-stream@1.0.0
   | +-- extend@3.0.0
   | +-- forever-agent@0.6.1
   | +-- form-data@1.0.0-rc4
   | | `-- async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- chalk@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `-- color-convert@1.0.0
   | | | +-- escape-string-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `-- ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- supports-color@2.0.0
   | | +-- commander@2.9.0
   | | | `-- graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- generate-function@2.0.0
   | | | +-- generate-object-property@1.2.0
   | | | | `-- is-property@1.0.2
   | | | +-- jsonpointer@2.0.0
   | | | `-- xtend@4.0.1
   | | `-- pinkie-promise@2.0.0
   | |   `-- pinkie@2.0.4
   | +-- hawk@3.1.3
   | | +-- boom@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `-- sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +-- assert-plus@0.2.0
   | | +-- jsprim@1.2.2
   | | | +-- extsprintf@1.0.2
   | | | +-- json-schema@0.2.2
   | | | `-- verror@1.3.6
   | | `-- sshpk@1.7.4
   | |   +-- asn1@0.2.3
   | |   +-- dashdash@1.13.0
   | |   | `-- assert-plus@1.0.0
   | |   +-- ecc-jsbn@0.1.1
   | |   +-- jodid25519@1.0.2
   | |   +-- jsbn@0.1.0
   | |   `-- tweetnacl@0.14.1
   | +-- is-typedarray@1.0.0
   | +-- isstream@0.1.2
   | +-- json-stringify-safe@5.0.1
   | +-- mime-types@2.1.10
   | | `-- mime-db@1.22.0
   | +-- node-uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +-- tough-cookie@2.2.2
   | `-- tunnel-agent@0.4.2
   `-- source-map@0.5.3

示例

以下是 LESS 的一個簡單示例。

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

現在讓我們建立一個style.less檔案，它與 CSS 非常相似，唯一的區別是它將以.less副檔名儲存。這兩個檔案，.html和.less都應該在nodejs資料夾內建立。

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

當您執行上述命令時，它將自動建立style.css檔案。每當您更改 LESS 檔案時，都需要在cmd中執行上述命令，然後style.css檔案將被更新。

當您執行上述命令時，style.css檔案將包含以下程式碼 -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

輸出

現在讓我們執行以下步驟來檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在hello.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 巢狀規則

描述

它是一組 CSS 屬性，允許將一個類的屬性用於另一個類，並將類名作為其屬性。在 LESS 中，您可以像使用類或 ID 選擇器一樣使用 CSS 樣式宣告混合宏。它可以儲存多個值，並且可以在需要時在程式碼中重用。

示例

以下示例演示了在 LESS 檔案中使用巢狀規則 -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

接下來，建立style.less檔案。

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在nested_rules.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 巢狀指令和冒泡

描述

您可以像巢狀選擇器一樣巢狀media和keyframe等指令。您可以將指令放在頂部，並且其相關元素在其規則集中不會更改。這稱為冒泡過程。

示例

以下示例演示了在 LESS 檔案中使用巢狀指令和冒泡 -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

接下來，建立檔案style.less。

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在nested_directives_bubbling.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 操作

描述

LESS 支援一些算術運算，如加(+)、減(-)、乘(*)和除(/)，它們可以對任何數字、顏色或變數進行運算。當您使用變數並且感覺像在進行簡單的數學運算時，操作可以節省大量時間。

示例

以下示例演示了在 LESS 檔案中使用操作 -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

接下來，建立檔案style.less。

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在operations.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 轉義

描述

它動態構建選擇器並使用屬性或變數值作為任意字串。

示例

以下示例演示了在 LESS 檔案中使用轉義 -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

現在建立style.less檔案。

style.less

p {
   color: ~"green";
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令，它將自動建立包含以下程式碼的 style.css 檔案 -

style.css

p {
   color: green;
}

在~"some_text"中編寫的任何內容在將 LESS 程式碼編譯為 CSS 程式碼後都將顯示為some_text。

輸出

現在讓我們執行以下步驟來檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在escaping.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 函式

描述

LESS 將 JavaScript 程式碼與值的處理相對映，並使用預定義函式在樣式表中處理 HTML 元素的方面。它提供了一些處理顏色的函式，例如 round 函式、floor 函式、ceil 函式、percentage 函式等。

示例

以下示例演示了在 LESS 檔案中使用函式 -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

現在建立style.less檔案。

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

現在執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在functions.html檔案中。
在瀏覽器中開啟此 HTML 檔案，您將收到以下輸出。

LESS - 名稱空間和訪問器

描述

名稱空間用於將混合宏分組到一個通用名稱下。使用名稱空間，您可以避免名稱衝突並將一組混合宏封裝在外部。

示例

以下示例演示了在 LESS 檔案中使用名稱空間和訪問器 -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

現在建立style.less檔案。

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在namespaces_accessors.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 作用域

描述

變數作用域指定可用變數的位置。變數將從本地作用域搜尋，如果它們不可用，則編譯器將從父作用域搜尋。

示例

以下示例演示了在 LESS 檔案中使用名稱空間和訪問器 -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

現在建立style.less檔案。

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在scope.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 註釋

描述

註釋使程式碼對使用者清晰易懂。您可以在程式碼中使用塊樣式和內聯註釋，但是當您編譯 LESS 程式碼時，單行註釋不會出現在 CSS 檔案中。

示例

以下示例演示了在 LESS 檔案中使用註釋 -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

現在建立style.less檔案。

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

現在執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在comments.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 匯入

描述

它用於匯入 LESS 或 CSS 檔案的內容。

示例

以下示例演示了在 LESS 檔案中使用匯入 -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

現在建立myfile.less檔案。

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

現在建立style.less檔案。

style.less

@import "https://tutorialspoint.tw/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

將從路徑https://tutorialspoint.tw/less/myfile.less匯入到style.less中的myfile.less檔案

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將上述 html 程式碼儲存在importing.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 變數

在本章中，我們將討論 LESS 中的變數。LESS 允許使用@符號定義變數。變數賦值使用冒號(:)完成。

下表詳細演示了 LESS變數的使用。

序號	變數用法和描述
1	概述透過使用變數可以避免多次重複相同的值。
2	變數插值變數也可以用於其他地方，例如選擇器名稱、屬性名稱、URL和@import語句。
3	變數名稱我們可以使用包含值的變數名稱定義變數。
4	延遲載入在延遲載入中，即使變數未被使用，也可以使用它們。
5	預設變數預設變數具有僅在變數未設定時才設定變數的功能。此功能不是必需的，因為可以透過稍後定義變數來輕鬆覆蓋變數。

LESS - 擴充套件

擴充套件是 LESS 偽類，它透過使用:extend選擇器在一個選擇器中擴充套件其他選擇器的樣式。

示例

以下示例演示了在 LESS 檔案中使用extend：

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

接下來，建立style.less檔案。

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

您可以使用以下命令將extend.less檔案編譯為extend.css：

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到extend_syntax.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

擴充套件語法

擴充套件放置在規則集中或附加到選擇器上。它類似於包含一個或多個類別的偽類，這些類別用逗號分隔。可以使用可選關鍵字all，每個選擇器後面都可以跟它。

示例

以下示例演示了在 LESS 檔案中使用extend 語法：

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

現在建立style.less檔案。

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到extend_syntax.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

下表列出了您可以在 LESS 中使用的所有型別的擴充套件語法：

序號	型別和描述
1	附加到選擇器的擴充套件擴充套件連線到一個選擇器，看起來類似於具有選擇器作為引數的偽類。
2	規則集內的擴充套件 &:extend(selector)語法可以放在規則集的主體內部。
3	擴充套件巢狀選擇器巢狀選擇器使用extend選擇器進行匹配。
4	使用擴充套件進行精確匹配預設情況下，extend會在選擇器之間查詢完全匹配。
5	第 n 個表示式第 n 個表示式的形式在擴充套件中很重要，否則它會將選擇器視為不同的。
6	擴充套件“all” 當在extend引數的最後識別到關鍵字all時，LESS 會將該選擇器匹配為另一個選擇器的一部分。
7	使用擴充套件進行選擇器插值 extend可以連線到插值選擇器。
8	@media 中的範圍/擴充套件擴充套件僅匹配存在於同一媒體宣告中的選擇器。
9	重複檢測它無法檢測選擇器的重複。

以下是擴充套件的用例型別

序號	型別和描述
1	經典用例經典用例用於避免在 LESS 中新增基類。
2	減小 CSS 大小擴充套件用於將選擇器移動到您要使用的屬性儘可能遠的位置；這有助於減少生成的 css 程式碼。
3	組合樣式/更高階的混合使用擴充套件，我們可以將特定選擇器的相同樣式組合到其他選擇器中。

LESS - 混合

混合類似於程式語言中的函式。混合是一組 CSS 屬性，允許您將一個類的屬性用於另一個類，並將類名包含在其屬性中。在 LESS 中，您可以像使用 CSS 樣式一樣宣告混合，使用類或 ID 選擇器。它可以儲存多個值，並且可以在需要時在程式碼中重複使用。

下表詳細演示了 LESS 混合的使用。

序號	混合用法和描述
1	不輸出混合可以透過簡單地在混合後面放置括號來使混合在輸出中消失。
2	混合中的選擇器混合不僅可以包含屬性，還可以包含選擇器。
3	名稱空間名稱空間用於將混合分組到一個通用名稱下。
4	受保護的名稱空間當將保護應用於名稱空間時，僅當保護條件返回 true 時才使用由其定義的混合。
5	!important 關鍵字 !important關鍵字用於覆蓋特定屬性。

示例

以下示例演示了在 LESS 檔案中使用混合：

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

接下來，建立style.less檔案。

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

您可以使用以下命令將style.less編譯為style.css：

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到less_mixins.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

呼叫混合時，括號是可選的。在上面的示例中，.p1();和.p1;兩個語句都執行相同操作。

LESS - 引數化混合

描述

引數化混合使用一個或多個引數，透過獲取引數及其屬性來擴充套件 LESS 的功能，以便在混合到另一個塊時自定義混合輸出。

例如，考慮一個簡單的 LESS 程式碼片段：

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

這裡我們使用引數化混合作為.border，它有三個引數 - 寬度、樣式和顏色。使用這些引數，您可以使用傳遞的引數值自定義混合輸出。

下表描述了不同型別的引數化混合及其描述。

序號	型別和描述
1	具有多個引數的混合引數可以使用逗號或分號分隔。
2	命名引數混合透過使用引數名稱而不是位置來提供引數值。
3	@arguments 變數當呼叫混合時，@arguments包含所有傳遞的引數。
4	高階引數和@rest變數混合透過使用....獲取可變數量的引數。
5	模式匹配透過向混合傳遞引數來更改混合的行為。

LESS - 混合作為函式

在本章中，我們將瞭解混合作為函式的重要性。像函式一樣，混合可以巢狀，可以接受引數，也可以返回值。

下表詳細演示了混合作為函式的使用。

序號	混合用法和描述
1	混合範圍混合包含變數；這些變數可以在呼叫方的範圍內使用並且是可見的。
2	混合和返回值混合類似於函式，在混合中定義的變數將充當返回值。
3	另一個混合中的混合每當在另一個混合中定義混合時，它也可以用作返回值。

LESS - 將規則集傳遞給混合

描述

分離的規則集包含規則集，例如屬性、巢狀規則集、變數宣告、混合等。它儲存在一個變數中幷包含在另一個結構中；規則集的所有屬性都複製到該結構中。

示例

以下示例顯示瞭如何在 LESS 檔案中將規則集傳遞給混合：

passing_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

接下來，建立style.less檔案。

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到passing_ruleset.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

範圍

分離規則集中的所有變數和混合在規則集被呼叫或定義的任何地方都可用。否則，呼叫方和定義範圍預設情況下都可用。當兩個範圍都包含相同的混合或變數時，聲明範圍優先。分離規則集主體在聲明範圍內定義。在分離規則集從一個變數複製到另一個變數後，它不會更改其範圍。

下表列出了所有型別的範圍：

序號	型別和描述
1	定義和呼叫方範圍可見性變數和混合在分離的規則集中定義。
2	引用不會修改分離規則集範圍只需給出引用，規則集就不會訪問任何新範圍。
3	解鎖將修改分離規則集範圍分離規則集可以透過匯入到其中來訪問範圍。

LESS - 匯入指令

描述

@import指令用於匯入程式碼中的檔案。它將 LESS 程式碼分散到不同的檔案中，並允許輕鬆維護程式碼結構。您可以在程式碼中的任何位置放置@import語句。

例如，您可以使用@import關鍵字作為@import "file_name.less"匯入檔案。

副檔名

您可以根據不同的副檔名使用@import語句，例如：

如果您使用.css副檔名，則它將被視為 CSS，並且@import語句將保持不變。
如果它包含任何其他副檔名，則它將被視為 LESS 並將被匯入。
如果沒有 LESS 副檔名，則它將被附加並作為匯入的 LESS 檔案包含。

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

示例

以下示例演示了在 SCSS 檔案中使用變數：

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

接下來，建立import_dir.less檔案。

import_dir.less

.myline {
   font-size: 20px;
}

現在，建立style.less檔案。

style.less

@import "https://tutorialspoint.tw/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.less檔案將從路徑https://tutorialspoint.tw/less/import_dir.less匯入到style.less檔案中。

您可以使用以下命令將style.less編譯為style.css：

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到import_directives.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 匯入選項

在本章中，我們將瞭解匯入選項在 LESS 中的重要性。LESS 提供@import語句，允許樣式表匯入 LESS 和 CSS 樣式表。

下表列出了將在匯入語句中實現的匯入指令。

序號	匯入選項和描述
1	引用它僅將 LESS 檔案用作引用，不會輸出它。
2	內聯它使您能夠將 CSS 複製到輸出中，而無需進行處理。
3	less 它將把匯入的檔案視為常規 LESS 檔案，無論副檔名是什麼。
4	css 它將把匯入的檔案視為常規 CSS 檔案，無論副檔名是什麼。
5	once 它只匯入檔案一次。
6	multiple 它將多次匯入檔案。
7	optional 即使找不到要匯入的檔案，它也會繼續編譯。

在@import語句中允許使用多個關鍵字，但是您必須使用逗號分隔關鍵字。

例如：

@import (less, optional) "custom.css";

LESS - 混合保護

描述

如果要匹配簡單值或表示式上的引數數量，則可以使用保護。它與混合宣告相關聯，幷包含附加到混合的條件。每個混合將有一個或多個用逗號分隔的保護；保護必須括在括號內。LESS 使用受保護的混合而不是if/else語句，並執行計算以指定匹配的混合。

下表描述了不同型別的混合保護及其描述。

序號	型別和描述
1	保護比較運算子您可以使用比較運算子(=)來比較數字、字串、識別符號等。
2	保護邏輯運算子您可以使用and關鍵字來處理保護的邏輯運算子。
3	型別檢查函式它包含內建函式以確定匹配混合的值型別。
4	條件混合 LESS 使用default函式將混合與其他混合匹配進行匹配。

示例

以下示例演示了在 LESS 檔案中使用 mixin 保護的用法。

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

現在，建立style.less檔案。

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

您可以使用以下命令將style.less編譯為style.css：

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到mixin-guard.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - CSS 保護

描述

保護用於匹配表示式上的簡單值或多個引數。它應用於 CSS 選擇器。它是宣告 mixin 並立即呼叫的語法。為了成功地引入if型別的語句；將其與特性&結合使用，它允許你組合多個保護。

示例

以下示例演示了在 LESS 檔案中使用css保護的用法。

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

接下來，建立style.less檔案。

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

.style {
   background-color: blue;
   color: white;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到css_guard.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 迴圈

在本章中，我們將瞭解 LESS 中迴圈的工作原理。迴圈語句允許我們多次執行一個語句或一組語句。當遞迴 mixin 與保護表示式和模式匹配結合時，可以建立各種迭代/迴圈結構。

示例

以下示例演示了在 LESS 檔案中使用迴圈的用法。

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

接下來，建立style.less檔案。

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到loop_example.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

LESS - 合併

描述

LESS 中的此功能允許使用單個屬性將值新增到來自多個屬性的逗號或空格分隔列表中。它可以用於背景和轉換屬性。

下表描述了合併功能支援的兩種型別的函式。

序號	型別和描述
1	逗號它在末尾新增屬性值。
2	空格它使用空格新增屬性值。

LESS - 父選擇器

在本章中，讓我們瞭解父選擇器的工作原理。可以使用&（與號）運算子引用父選擇器。巢狀規則的父選擇器由&運算子表示，並在將修改類或偽類應用於現有選擇器時使用。

下表顯示了父選擇器的型別。

序號	型別和描述
1	多個 & &將表示最近的選擇器以及所有父選擇器。
2	更改選擇器順序在繼承的（父）選擇器之前新增選擇器在更改選擇器順序時很有用。
3	組合爆炸 &還可以生成以逗號分隔的列表中所有選擇器的所有可能排列。

示例

以下示例演示了在 LESS 檔案中使用父選擇器的用法。

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

接下來，建立style.less檔案。

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

您可以使用以下命令將style.less檔案編譯為style.css -

lessc style.less style.css

執行上述命令；它將自動建立包含以下程式碼的style.css檔案 -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

在以上示例中，&指的是選擇器a。

輸出

請按照以下步驟檢視上述程式碼的工作原理 -

將以上 html 程式碼儲存到parent_selector1.htm檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

父選擇器運算子有很多用途，例如，當您需要以與預設方式不同的方式組合巢狀規則的選擇器時。&的另一個典型用法是重複生成類名。有關更多資訊，請點選此處。

LESS - 雜項函式

雜項函式包含一組不同型別的函式。

下表列出了所有型別的雜項函式。

序號	函式 & 描述
1	color 它是一個表示顏色的字串。
2	image - size 它用於檢查檔案中影像的尺寸。
3	image - width 它檢查檔案中影像的寬度。
4	image - height 它檢查檔案中影像的高度。
5	convert 將一個數字從一個單位轉換為另一個單位。
6	data - uri Data uri 是統一資源識別符號 (URI) 模式，它在網頁上內聯獲取資源。
7	default Default 函式僅在它在保護條件內可用且與任何其他 mixin 不匹配時返回 true。
8	unit Default 函式僅在它在保護條件內可用且與任何其他 mixin 不匹配時返回 true
9	get - unit get - unit 函式返回其單位，其中引數存在於數字和單位中。
10	svg - gradient svg-gradient 是一種從一種顏色過渡到另一種顏色的漸變。它可以向同一元素新增多種顏色。

LESS - 字串函式

描述

Less 支援如下所示的一些字串函式。

escape
e
% format
replace

下表描述了上述字串函式及其描述。

序號	型別和描述	示例
1	Escape 它透過對特殊字元使用 URL 編碼來對字串或資訊進行編碼。你不能對某些字元進行編碼，例如,、/、?、@、&、+、~、!、$、'，以及一些你可以編碼的字元，例如\、#、^、(、)、{、}、:、>、<、]、[和=。	escape("Hello!! welcome to Tutorialspoint!") 它輸出轉義後的字串為： Hello%21%21%20welcome%20to%20Tutorialspoint%21
2	e 它是一個字串函式，它使用字串作為引數並返回不帶引號的資訊。它是一個 CSS 轉義，它使用~"some content"轉義值和數字作為引數。	filter: e("Hello!! welcome to Tutorialspoint!"); 它輸出轉義後的字串為： filter: Hello!! welcome to Tutorialspoint!;
3	% format 此函式格式化字串。它可以用以下格式編寫： %(string, arguments ...)	format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); 它輸出格式化的字串為： format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4	replace 它用於替換字串中的文字。它使用一些引數： string - 它搜尋要替換的字串。 pattern - 它搜尋正則表示式模式。 replacement - 它替換與模式匹配的字串。 flags - 這些是可選的正則表示式標誌。	replace("Welcome, val?", "val\?", "to Tutorialspoint!"); 它替換字串為： "Welcome, to Tutorialspoint!"

序號

型別和描述

示例

Escape

它透過對特殊字元使用 URL 編碼來對字串或資訊進行編碼。你不能對某些字元進行編碼，例如,、/、?、@、&、+、~、!、$、'，以及一些你可以編碼的字元，例如\、#、^、(、)、{、}、:、>、<、]、[和=。

escape("Hello!! welcome to Tutorialspoint!")

它輸出轉義後的字串為：

Hello%21%21%20welcome%20to%20Tutorialspoint%21

它是一個字串函式，它使用字串作為引數並返回不帶引號的資訊。它是一個 CSS 轉義，它使用~"some content"轉義值和數字作為引數。

filter: e("Hello!! welcome to Tutorialspoint!");

它輸出轉義後的字串為：

filter: Hello!! welcome to Tutorialspoint!;

% format

此函式格式化字串。它可以用以下格式編寫：

%(string, arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

它輸出格式化的字串為：

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";

replace

它用於替換字串中的文字。它使用一些引數：

string - 它搜尋要替換的字串。
pattern - 它搜尋正則表示式模式。
replacement - 它替換與模式匹配的字串。
flags - 這些是可選的正則表示式標誌。

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

它替換字串為：

"Welcome, to Tutorialspoint!"

LESS - 列表函式

描述

LESS 包含列表函式，這些函式用於指定列表的長度和列表中值的位。置

下表列出了 LESS 中使用的列表函式。

序號	函式 & 描述
1	Length 它將以逗號或空格分隔的值列表作為引數。
2	Extract 它將返回列表中指定位置的值。

LESS - 數學函式

描述

數學函式包括用於執行數值運算的方法，例如舍入、平方根、冪值、模數、百分比等。

下表顯示了 LESS 中使用的數學函式。

序號	函式 & 描述	示例
1	ceil 它將數字向上舍入到下一個最高的整數。	ceil(0.7) 它將數字舍入到： 1
2	floor 它將數字向下舍入到下一個最低的整數。	floor(3.3) 它將數字舍入到： 3
3	percentage 它將浮點數轉換為百分比字串。	percentage(0.2) 它將數字轉換為百分比字串，如下所示： 20%
4	round 它舍入浮點數。	round(3.77) 它將數字轉換為舍入值，如下所示： 4
5	sqrt 它返回數字的平方根。	sqrt(25) 它將數字的平方根定義為： 5
6	abs 它提供數字的絕對值。	abs(30ft) 它顯示絕對值，如下所示： 30ft
7	sin 它返回數字的弧度。	sin(2) 它計算正弦值，如下所示： 0.90929742682
8	asin 它指定數字的反正弦（正弦的反函式），返回值介於 -pi/2 和 pi/2 之間。	asin(1) 它計算 asin 值，如下所示： 1.5707963267948966
9	cos 它返回指定值的餘弦，並確定不帶單位的數字的弧度。	cos(2) 它計算 cos 值，如下所示： -0.4161468365471424
10	acos 它指定數字的反餘弦（餘弦的反函式），返回值介於 0 和 pi 之間。	acos(1) 它計算 acos 值，如下所示： 0
11	tan 它指定數字的正切。	tan(60) 它計算 tan 值，如下所示： 0.320040389379563
12	atan 它指定指定數字的反正切（正切的反函式）。	atan(1) 它顯示 atan 值，如下所示： 0.7853981633974483
13	pi 它返回 pi 值。	pi() 它確定 pi 值，如下所示： 3.141592653589793
14	pow 它指定第一個引數的值乘以第二個引數的冪。	pow(3,3) 它指定冪值，如下所示： 27
15	mod 它返回第一個引數相對於第二個引數的模數。它還可以處理負數和浮點數。	mod(7,3) 它返回模數值，如下所示： 1
16	min 它指定一個或多個引數的最小值。	min(70,30,45,20) 它返回最小值，如下所示： 20
17	max 它指定一個或多個引數的最大值。	max(70,30,45,20) 它返回最大值，如下所示： 70

序號

函式 & 描述

示例

ceil

它將數字向上舍入到下一個最高的整數。

ceil(0.7)

它將數字舍入到：

floor

它將數字向下舍入到下一個最低的整數。

floor(3.3)

它將數字舍入到：

percentage

它將浮點數轉換為百分比字串。

percentage(0.2)

它將數字轉換為百分比字串，如下所示：

20%

round

它舍入浮點數。

round(3.77)

它將數字轉換為舍入值，如下所示：

sqrt

它返回數字的平方根。

sqrt(25)

它將數字的平方根定義為：

abs

它提供數字的絕對值。

abs(30ft)

它顯示絕對值，如下所示：

30ft

sin

它返回數字的弧度。

sin(2)

它計算正弦值，如下所示：

0.90929742682

asin

它指定數字的反正弦（正弦的反函式），返回值介於 -pi/2 和 pi/2 之間。

asin(1)

它計算 asin 值，如下所示：

1.5707963267948966

cos

它返回指定值的餘弦，並確定不帶單位的數字的弧度。

cos(2)

它計算 cos 值，如下所示：

-0.4161468365471424

acos

它指定數字的反餘弦（餘弦的反函式），返回值介於 0 和 pi 之間。

acos(1)

它計算 acos 值，如下所示：

tan

它指定數字的正切。

tan(60)

它計算 tan 值，如下所示：

0.320040389379563

atan

它指定指定數字的反正切（正切的反函式）。

atan(1)

它顯示 atan 值，如下所示：

0.7853981633974483

它返回 pi 值。

pi()

它確定 pi 值，如下所示：

3.141592653589793

pow

它指定第一個引數的值乘以第二個引數的冪。

pow(3,3)

它指定冪值，如下所示：

mod

它返回第一個引數相對於第二個引數的模數。它還可以處理負數和浮點數。

mod(7,3)

它返回模數值，如下所示：

min

它指定一個或多個引數的最小值。

min(70,30,45,20)

它返回最小值，如下所示：

max

它指定一個或多個引數的最大值。

max(70,30,45,20)

它返回最大值，如下所示：

LESS - 型別函式

在本章中，我們將瞭解型別函式在 LESS 中的重要性。它們用於確定值的型別。

下表顯示了 LESS 中使用的型別函式。


isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

序號	型別函式 & 描述	示例
1	isnumber 它以一個值作為引數，如果它是數字則返回true，否則返回false。	isnumber(1234); // true isnumber(24px); // true isnumber(7.8%); // true isnumber(#fff); // false isnumber(red); // false isnumber("variable"); // false isnumber(keyword); // false isnumber(url(...)); // false
2	isstring 它以一個值作為引數，如果它是字串則返回true，否則返回false。	isstring("variable"); // true isstring(1234); // false isstring(24px); // false isstring(7.8%); // false isstring(#fff); // false isstring(red); // false isstring(keyword); // false isstring(url(...)); // false
3	iscolor 它以一個值作為引數，如果值是顏色則返回true，如果不是則返回false。	iscolor(#fff); // true iscolor(red); // true iscolor(1234); // false iscolor(24px); // false iscolor(7.8%); // false iscolor("variable"); // false iscolor(keyword); // false iscolor(url(...)); // false
4	iskeyword 它以一個值作為引數，如果值是關鍵字則返回true，如果不是則返回false。	iskeyword(keyword); // true iskeyword(1234); // false iskeyword(24px); // false iskeyword(7.8%); // false iskeyword(#fff); // false iskeyword(red) ; // false iskeyword("variable");// false iskeyword(url(...)); // false
5	isurl 它以一個值作為引數，如果值是 url 則返回true，如果不是則返回false。	isurl(url(...)); // true isurl(keyword); // false isurl(1234); // false isurl(24px); // false isurl(7.8%); // false isurl(#fff); // false isurl(red) ; // false isurl("variable"); // false
6	ispixel 它以一個值作為引數，如果值是畫素中的數字則返回true，否則返回false。	ispixel(24px); // true ispixel(1234); // false ispixel(7.8%); // false ispixel(keyword); // false ispixel(#fff); // false ispixel(red) ; // false ispixel("variable"); // false ispixel(url(...)); // false
7	isem 它以一個值作為引數，如果值是 em 值則返回true，如果不是則返回false。	isem(0.5em); // true isem(1234); // false isem(24px); // false isem(keyword); // false isem(#fff); // false isem(red) ; // false isem("variable"); // false isem(url(...)); // false
8	ispercentage 它以一個值作為引數，如果值是百分比則返回true，如果值不是百分比則返回false。	ispercentage(7.5%); // true ispercentage(url(...)); // false ispercentage(keyword); // false ispercentage(1234); // false ispercentage(24px); // false ispercentage(#fff); // false ispercentage(red) ; // false ispercentage("variable"); // false
9	isunit 如果值是以引數提供的指定單位的數字，則返回true；如果值不是指定單位的數字，則返回false。	isunit(10px, px); // true isunit(5rem, rem); // true isunit(7.8%, '%'); // true isunit(2.2%, px); // false isunit(24px, rem); // false isunit(48px, "%"); // false isunit(1234, em); // false isunit(#fff, pt); // false isunit("mm", mm); // false
10	isruleset 它以一個值作為引數，如果值是規則集則返回true，否則返回false。	@rules: { color: green; } isruleset(@rules); // true isruleset(1234); // false isruleset(24px); // false isruleset(7.8%); // false isruleset(#fff); // false isruleset(blue); // false isruleset("variable"); // false isruleset(keyword); // false isruleset(url(...)); // false

LESS - 顏色定義函式

描述

LESS 提供了許多有用的顏色函式，以不同的方式更改和操作顏色。LESS 支援如下表所示的一些顏色定義函式。

序號	函式 & 描述	示例
1	rgb 它根據紅色、綠色和藍色值建立顏色。它具有以下引數： red - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。 green - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。 blue - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。	rgb(220,20,60) 它使用 rgb 值轉換顏色，如下所示： #dc143c
2	rgba 它根據紅色、綠色、藍色和 alpha 值確定顏色。它具有以下引數： red - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。 green - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。 blue - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。 alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。	rgba(220,20,60, 0.5) 它使用 rgba 值轉換顏色物件，如下所示： rgba(220, 20, 60, 0.5)
3	argb 它定義顏色以#AARRGGBB格式的十六進位制表示形式。它使用以下引數： color - 它指定顏色物件。	argb(rgba(176,23,31,0.5)) 它返回 argb 顏色，如下所示： #80b0171f
4	hsl 它根據色相、飽和度和亮度值生成顏色。它具有以下引數： hue - 它包含 0 - 360 之間的整數，表示度數。 saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。 lightness - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。	hsl(120,100%, 50%) 它使用 HSL 值返回顏色物件，如下所示： #00ff00
5	hsla 它根據色相、飽和度、亮度和 alpha 值生成顏色。它具有以下引數： hue - 它包含 0 - 360 之間的整數，表示度數。 saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。 lightness - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。 alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。	hsla(0,100%,50%,0.5) 它使用 HSLA 值指定顏色物件，如下所示： rgba(255, 0, 0, 0.5);
6	hsv 它根據色相、飽和度和值生成顏色。它包含以下引數： hue - 它包含 0 - 360 之間的整數，表示度數。 saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。值 - 它包含 0 到 1 之間的數字或 0 到 100% 之間的百分比。	hsv(80,90%,70%) 它將顏色物件轉換為 hsv 值，如下所示： #7db312
7	hsva 它根據色相、飽和度、值和 alpha 值生成顏色。它使用以下引數： hue - 它包含 0 - 360 之間的整數，表示度數。 saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。值 - 它包含 0 到 1 之間的數字或 0 到 100% 之間的百分比。 alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。	hsva(80,90%,70%,0.6) 它使用 hsva 值指定顏色物件，如下所示： rgba(125, 179, 18, 0.6)

序號

函式 & 描述

示例

rgb

它根據紅色、綠色和藍色值建立顏色。它具有以下引數：

red - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。
green - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。
blue - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。

rgb(220,20,60)

它使用 rgb 值轉換顏色，如下所示：

#dc143c

rgba

它根據紅色、綠色、藍色和 alpha 值確定顏色。它具有以下引數：

red - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。
green - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。
blue - 它包含 0 - 255 之間的整數或 0 - 100% 之間的百分比。
alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。

rgba(220,20,60, 0.5)

它使用 rgba 值轉換顏色物件，如下所示：

rgba(220, 20, 60, 0.5)

argb

它定義顏色以#AARRGGBB格式的十六進位制表示形式。它使用以下引數：

color - 它指定顏色物件。

argb(rgba(176,23,31,0.5))

它返回 argb 顏色，如下所示：

#80b0171f

hsl

它根據色相、飽和度和亮度值生成顏色。它具有以下引數：

hue - 它包含 0 - 360 之間的整數，表示度數。
saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。
lightness - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。

hsl(120,100%, 50%)

它使用 HSL 值返回顏色物件，如下所示：

#00ff00

hsla

它根據色相、飽和度、亮度和 alpha 值生成顏色。它具有以下引數：

hue - 它包含 0 - 360 之間的整數，表示度數。
saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。
lightness - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。
alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。

hsla(0,100%,50%,0.5)

它使用 HSLA 值指定顏色物件，如下所示：

rgba(255, 0, 0, 0.5);

hsv

它根據色相、飽和度和值生成顏色。它包含以下引數：

hue - 它包含 0 - 360 之間的整數，表示度數。
saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。
值 - 它包含 0 到 1 之間的數字或 0 到 100% 之間的百分比。

hsv(80,90%,70%)

它將顏色物件轉換為 hsv 值，如下所示：

#7db312

hsva

它根據色相、飽和度、值和 alpha 值生成顏色。它使用以下引數：

hue - 它包含 0 - 360 之間的整數，表示度數。
saturation - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。
值 - 它包含 0 到 1 之間的數字或 0 到 100% 之間的百分比。
alpha - 它包含 0 - 1 之間的數字或 0 - 100% 之間的百分比。

hsva(80,90%,70%,0.6)

它使用 hsva 值指定顏色物件，如下所示：

rgba(125, 179, 18, 0.6)

LESS - 顏色通道函式

在本章中，我們將瞭解顏色通道函式在 LESS 中的重要性。LESS 支援一些內建函式，這些函式設定有關通道的值。通道根據顏色定義設定值。HSL 顏色具有色相、飽和度和亮度通道，RGB 顏色具有紅色、綠色和藍色通道。下表列出了所有顏色通道函式：


background: hue(hsl(75, 90%, 30%));
background: saturation(hsl(75, 90%, 30%));
background: lightness(hsl(75, 90%, 30%));
background: hsvhue(hsv(75, 90%, 30%));
background: hsvsaturation(hsv(75, 90%, 30%));
background: hsvvalue(hsv(75, 90%, 30%));
background: red(rgb(5, 15, 25));
background: green(rgb(5, 15, 25));
background: blue(rgb(5, 15, 25));
background: alpha(rgba(5, 15, 25, 1.5));
background: luma(rgb(50, 250, 150));
background: luminance(rgb(50, 250, 150));

序號	函式 & 描述	示例
1	色相在 HSL 顏色空間中，色相通道是從顏色物件中提取的。	background: hue(hsl(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 75;
2	飽和度在 HSL 顏色空間中，飽和度通道是從顏色物件中提取的。	background: saturation(hsl(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 90%;
3	亮度在 HSL 顏色空間中，亮度通道是從顏色物件中提取的。	background: lightness(hsl(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 30%;
4	hsvhue 在 HSV 顏色空間中，色相通道是從顏色物件中提取的。	background: hsvhue(hsv(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 75;
5	hsvsaturation 在 HSL 顏色空間中，飽和度通道是從顏色物件中提取的。	background: hsvsaturation(hsv(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 90%;
6	hsvvalue 在 HSL 顏色空間中，值通道是從顏色物件中提取的。	background: hsvvalue(hsv(75, 90%, 30%)); 它編譯成如下所示的 CSS： background: 30%;
7	紅色紅色通道是從顏色物件中提取的。	background: red(rgb(5, 15, 25)); 它編譯成如下所示的 CSS： background: 5;
8	綠色綠色通道是從顏色物件中提取的。	background: green(rgb(5, 15, 25)); 它編譯成如下所示的 CSS： background: 15;
9	藍色藍色通道是從顏色物件中提取的。	background: blue(rgb(5, 15, 25)); 它編譯成如下所示的 CSS： background: 25;
10	alpha alpha 通道是從顏色物件中提取的。	background: alpha(rgba(5, 15, 25, 1.5)); 它編譯成如下所示的 CSS： background: 2;
11	luma luma 值是從顏色物件中計算得出的。	background: luma(rgb(50, 250, 150)); 它編譯成如下所示的 CSS： background: 71.2513323%;
12	亮度 luma 值是在不進行伽馬校正的情況下計算得出的。	background: luminance(rgb(50, 250, 150)); 它編譯成如下所示的 CSS： background: 78.53333333%;

LESS - 顏色操作

描述

LESS 提供了許多有用的操作函式，以不同的方式更改和操作顏色，並以相同的單位獲取引數。LESS 支援一些顏色操作函式，如下表所示：

序號	指令和描述
1	飽和它改變元素中顏色的強度或飽和度。
2	去飽和它降低元素中顏色的強度或飽和度。
3	淺色它增加元素中顏色的亮度。
4	變暗它改變元素中顏色的強度或飽和度。
5	淡入它增加了所選元素的不透明度。
6	淡出它降低了所選元素的不透明度。
7	淡化它用於為所選元素設定顏色的透明度。
8	旋轉它用於旋轉所選元素的顏色角度。
9	混合它混合兩種顏色以及不透明度。
10	色調當您降低顏色的比例時，它將顏色與白色混合。
11	陰影當您降低顏色的比例時，它將顏色與黑色混合。
12	灰度它丟棄所選元素中顏色的飽和度。
13	對比度它設定元素中顏色的對比度。

LESS - 顏色混合函式

在本章中，我們將瞭解 LESS 中的顏色混合函式。這些類似於 Photoshop、Fireworks 或 GIMP 等影像編輯器中使用的操作，這些操作將您的 CSS 顏色與您的影像匹配。

下表顯示了 LESS 中使用的顏色混合函式。

序號	函式 & 描述
1	乘法它將兩種顏色相乘並返回結果顏色。
2	螢幕它獲取兩種顏色並返回更亮的顏色。它與乘法函式相反。
3	疊加它透過結合乘法和螢幕的效果生成結果。
4	柔光它的工作原理類似於疊加，但它只使用顏色的一部分，這會柔和地突出顯示其他顏色。
5	強光它的工作原理類似於疊加，但顏色的作用相反。
6	差異它從第一個輸入顏色中減去第二個輸入顏色。
7	排除它的工作原理類似於差異函式，但對比度較低。
8	平均它基於每個通道（RGB）計算兩個輸入顏色的平均值。
9	否定它與差異函式相反，它從第二個顏色中減去第一個顏色。

LESS - 命令列用法

使用命令列，我們可以將.less檔案編譯成.css。

全域性安裝 lessc

以下命令用於使用 npm（節點包管理器）安裝 lessc，以使 lessc 在全域性範圍內可用。

npm install less -g

您也可以在包名稱後新增特定版本。例如npm install less@1.6.2 -g

安裝用於節點開發

以下命令用於在您的專案資料夾中安裝最新版本的lessc。

npm i less -save-dev

它也新增到您專案 package.json 中的 devDependencies 中。

lessc 的 Beta 版本

當lessc結構釋出到npm時，它被標記為 beta。在這裡，新功能定期開發。less -v用於獲取當前版本。

安裝未釋出的 lessc 開發版本

當我們繼續安裝未釋出版本的 lessc 時，需要指定提交 - ish，並且需要按照說明將 git URL 識別為依賴項。這將確保您在專案中使用的是正確的 leesc 版本。

伺服器端和命令列用法

bin/lessc包含儲存庫中的二進位制檔案。它適用於 Windows、OS X 和 *nix 上的 nodejs。

命令列用法

當源設定為破折號或連字元 (-) 時，輸入從stdin讀取。

lessc [option option = parameter ...]  [destination]

例如，我們可以使用以下命令將.less編譯成.css：

lessc stylesheet.less stylesheet.css

我們可以使用以下命令將.less編譯成.css並壓縮結果。

lessc -x stylesheet.less stylesheet.css

選項

下表列出了命令列用法中使用的選項：


lessc -help
lessc -h
lessc --include-path = PATH1;PATH2
lessc -M
lessc --depends
lessc --no-color
lessc --no-ie-compat
lessc --no-js
lessc --lint
lessc -l
lessc --silent
lessc -s
lessc --strict-imports
lessc --insecure
lessc -version
lessc -v
lessc -x
lessc --compress
lessc --source-map
lessc -source-map = file.map
lessc --source-map-rootpath = dev-files/
lessc --source-map-basepath = less-files/
lessc --source-map-less-inline
lessc --source-map-map-inline
lessc --source-map-url = ../my-map.json
lessc -rp=resources/
lessc --rootpath=resources/
lessc -ru
lessc --relative-urls
lessc -sm = on
lessc --strict-math = on
lessc -su = on
lessc --strict-units = on
lessc --global-var = "background = green"
lessc --modify-var = "background = green"
lessc --url-args = "arg736357"
lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
lessc --clean-css
lessc --plugin = clean-css = "advanced"

序號	選項和描述	命令
1	幫助顯示幫助訊息以及可用的選項。	lessc -help lessc -h
2	包含路徑它包含庫中可用的路徑。這些路徑可以在 Less 檔案中簡單且相對地引用。Windows 中的路徑由冒號 (:) 或分號 (;) 分隔。	lessc --include-path = PATH1;PATH2
3	Makefile 它生成一個 makefile 匯入依賴項列表作為輸出到標準輸出。	lessc -M lessc --depends
4	無顏色它停用彩色輸出。	lessc --no-color
5	無 IE 相容性它停用 IE 相容性檢查。	lessc --no-ie-compat
6	停用 Javascript 它停用 less 檔案中的 javascript。	lessc --no-js
7	Lint 它檢查語法並在沒有任何輸出的情況下報告錯誤。	lessc --lint lessc -l
8	靜默它強制停止顯示錯誤訊息。	lessc --silent lessc -s
9	嚴格匯入它強制評估匯入。	lessc --strict-imports
10	允許從不安全的 HTTPS 主機匯入它從不安全的 HTTPS 主機匯入。	lessc --insecure
11	版本它顯示版本號並退出。	lessc -version lessc -v
12	壓縮它有助於刪除空格並壓縮輸出。	lessc -x lessc --compress
13	源對映輸出檔名它在 less 中生成 sourcemap。如果定義了 sourcemap 選項但沒有檔名，則它將使用副檔名 map 並將 Less 檔名作為源。	lessc --source-map lessc -source-map = file.map
14	源對映根路徑指定根路徑，並應將其新增到 sourcemap 中的 Less 檔案路徑以及您輸出 css 中指定的對映檔案。	lessc --source-map-rootpath = dev-files/
15	指定一個路徑，該路徑必須從輸出路徑中刪除。Basepath 與 rootpath 選項相反。源對映基本路徑	lessc --source-map-basepath = less-files/
16	源對映 Less 內聯所有 Less 檔案都應包含在 sourcemap 中。	lessc --source-map-less-inline
17	源對映對映內聯它指定在輸出 css 中對映檔案應為內聯。	lessc --source-map-map-inline
18	源對映 URL 允許 URL 覆蓋 css 中對映檔案中的點。	lessc --source-map-url = ../my-map.json
19	根路徑它設定相對匯入和 url 中 URL 重寫的路徑。	lessc -rp=resources/ lessc --rootpath=resources/
20	相對 URL 在匯入的檔案中，URL 將被重寫，以便 URL 始終相對於基本檔案。	lessc -ru lessc --relative-urls
21	嚴格數學它處理 css 中的所有 Math 函式。預設情況下，它是關閉的。	lessc -sm = on lessc --strict-math = on
22	嚴格單位它允許混合單位。	lessc -su = on lessc --strict-units = on
23	全域性變數定義一個變數，該變數可以被檔案引用。	lessc --global-var = "background = green"
24	修改變數這與全域性變數選項不同；它將宣告移動到 less 檔案的末尾。	lessc --modify-var = "background = green"
25	URL 引數要繼續到每個 URL，允許指定一個引數。	lessc --url-args = "arg736357"
26	行號生成內聯源對映。	lessc --line-numbers = comments lessc --line-numbers = mediaquery lessc --line-numbers = all
27	外掛它載入外掛。	lessc --clean-css lessc --plugin = clean-css = "advanced"

LESS - 在瀏覽器中使用 Less

當您希望在需要時動態編譯 Less 檔案而不是在伺服器端編譯時，Less 用於瀏覽器；這是因為 less 是一個大型 javascript 檔案。

首先，我們需要新增 LESS 指令碼才能在瀏覽器中使用 LESS：

<script src = "less.js"></script>

要查詢頁面上的樣式標籤，我們需要在頁面上新增以下行。它還使用編譯後的 css 建立樣式標籤。

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

設定選項

在指令碼標籤之前，可以在 less 物件上以程式設計方式設定選項。它將影響 less 的所有程式設計用法和初始連結標籤。

例如，我們可以如下設定選項：

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

我們也可以在指令碼標籤上以另一種格式設定選項，如下所示：

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

您也可以將這些選項新增到連結標籤中。

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

需要考慮的屬性選項要點是：

window.less < script tag < link tag是重要性級別。
資料屬性不能用駝峰命名法編寫；連結標籤選項表示為時間選項。
具有非字串值的資料屬性應為 JSON 有效。

監視模式

透過將 env 選項設定為development並在新增 less.js 檔案後呼叫less.watch()可以啟用監視模式。如果您希望臨時啟用監視模式，則在 URL 中新增#!watch。

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

修改變數

啟用 LESS 變數的執行時修改。當呼叫新值時，LESS 檔案將重新編譯。以下程式碼顯示了修改變數的基本用法：

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

除錯

我們可以將選項!dumpLineNumbers:mediaquery新增到 url 或dumpLineNumbers選項，如上所述。mediaquery選項可以與 FireLESS 一起使用（它顯示原始 LESS 檔名和 LESS 生成的 CSS 樣式的行號）。

選項

在載入指令碼檔案 less.js 之前，必須在全域性less物件中設定選項。

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

async - 它是布林型別。匯入的檔案是否使用 async 選項請求。預設情況下，它是 false。
dumpLineNumbers − 它是一個字串型別。在輸出的 css 檔案中，當設定了 dumpLineNumbers 時，會新增原始碼行資訊。這有助於除錯特定的規則來自哪裡。
env − 它是一個字串型別。env 可以在開發或生產環境中執行。當文件 URL 以 file:// 開頭或它存在於您的本地機器上時，會自動設定開發環境。
errorReporting − 當編譯失敗時，可以設定錯誤報告方法。
fileAsync − 它是一個布林型別。當頁面使用檔案協議存在時，它可以請求是否非同步匯入。
functions − 它是一個物件型別。
logLevel − 它是一個數字型別。它在 JavaScript 控制檯中顯示日誌級別。
- 2 : 資訊和錯誤
- 1 : 錯誤
- 0 : 無
poll − 在監視模式下，時間以毫秒為單位顯示輪詢之間的間隔。它是一個整數型別；預設情況下，設定為 1000。
relativeUrls − URL 會調整為相對路徑；預設情況下，此選項設定為 false。這意味著 URL 已經相對於入口 Less 檔案。它是一個布林型別。
globalVars − 將全域性變數列表插入程式碼中。字串型別變數應包含在引號中。
modifyVars − 它與全域性變數選項不同。它將宣告移動到 Less 檔案的末尾。
rootpath − 它在每個 URL 資源的開頭設定路徑。
useFileCache − 使用每個會話的檔案快取。Less 檔案中的快取用於呼叫 modifyVars，這樣所有 Less 檔案都不會再次檢索。

LESS - 瀏覽器支援

LESS 跨瀏覽器友好。它支援現代瀏覽器，如 Google Chrome、Mozilla Firefox、Safari 和 Internet Explorer，並允許重用 CSS 元素並使用相同的語義編寫 LESS 程式碼。在客戶端使用 LESS 時，以及顯示 JavaScript 時，必須注意效能影響，以避免任何美觀問題，例如

拼寫錯誤，
顏色變化，
紋理
外觀
連結等。

在伺服器端編譯 LESS 檔案以提高網站的效能水平。

PhantomJS 沒有實現 Function.prototype.bind 函式，因此您需要使用 es5 shim JavaScript 引擎才能在 PhantomJS 下執行。使用者可以透過變數進行調整以影響主題並在即時顯示它們，方法是在生產環境中使用客戶端 LESS。

如果您想在舊版瀏覽器中執行 LESS，則可以使用 es-5 shim JavaScript 引擎，它添加了 LESS 支援的 JavaScript 功能。您可以透過使用 JSON.parse 在指令碼或連結標籤上使用屬性，該屬性必須受瀏覽器支援。

LESS - 外掛

在本章中，我們將瞭解如何上傳外掛以擴充套件站點的功能。外掛可以用來使您的工作更容易。

命令列

要使用命令列安裝外掛，您首先需要安裝 lessc 外掛。可以使用 less-plugin 在開頭安裝外掛。以下命令列將幫助您安裝 clean-css 外掛：-

npm install less-plugin-clean-css

您可以直接使用以下命令使用已安裝的外掛：-

lessc --plugin = path_to_plugin = options

在程式碼中使用外掛

在 Node 中，外掛是必需的，並且它作為選項外掛陣列傳遞給 Less。

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

在瀏覽器中

在 less.js 指令碼之前，外掛作者應在頁面中包含 JavaScript 檔案。

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Less 外掛列表

下表列出了 LESS 中可用的外掛。

後處理器/功能外掛

序號	外掛 & 描述
1	Autoprefixer 它用於在從 LESS 轉換後為 CSS 新增字首。
2	CSScomb 它有助於改進樣式表的維護。
3	clean-css 它縮小來自 LESS 的 CSS 輸出。
4	CSSWring 它壓縮或縮小來自 LESS 的 CSS 輸出。
5	css-flip 它用於從左到右 (LTR) 或從右到左 (RTL) 生成 CSS。
6	functions 它在 LESS 本身中編寫 LESS 的函式。
7	glob 它用於匯入多個檔案。
8	group-css-media-queries 它對 Less 進行後處理。
9	inline-urls 自動將 URL 轉換為 data uri。
10	npm-import 它從 Less 的 npm 包中匯入。
11	pleeease 它用於後處理 Less。
12	rtl LESS 從 ltr（從左到右）反轉為 rtl（從右到左）。

框架/庫匯入器

序號	匯入器 & 描述
1	Bootstrap 在自定義 LESS 程式碼之前匯入 Bootstrap LESS 程式碼。
2	Bower Resolve 從 Bower 包中匯入 LESS 檔案。
3	Cardinal CSS for less.js 在自定義 LESS 程式碼之前，匯入 Cardinal 的 LESS 程式碼。
4	Flexbox Grid 最常匯入的框架或庫匯入器。
5	Flexible Grid System 它匯入 Flexible Grid System。
6	Ionic 它匯入 Ionic 框架。
7	Lesshat 它匯入 Lesshat 混合。
8	Skeleton 它匯入 Skeleton Less 程式碼。

函式庫

序號	匯入器 & 描述
1	advanced-color-functions 它用於查詢更多對比色。
2	cubehelix 使用 1 的伽馬校正值，cubehelix 函式可以在兩種顏色之間返回一種顏色。
3	lists 這是列表操作函式庫。

供外掛作者使用

LESS 允許作者與 Less 結合使用。

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

pluginManager 提供了一個持有者，可以新增檔案管理器、後處理器或訪問者。
setOptions 函式傳遞字串。
printUsage 函式用於解釋選項。

LESS - 程式化用法

LESS 中程式化用法的要點是 less.render 函式。此函式在 LESS 中使用以下格式：-

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

該函式也可以用以下方式編寫：-

less.render(css, options, function(error, output) {})

options 是一個可選引數，當您未指定回撥時，它返回一個 promise，當您指定回撥時，它返回一個 promise。您可以透過將其讀入字串並設定主檔案的 filename 欄位來顯示檔案。

sourceMap 選項允許設定源對映選項，例如 sourceMapURL、sourceMapBasepath、sourceMapRootpath、outputSourceFiles 和 sourceMapFileInline。這裡需要注意的是，sourceMap 選項不適用於 less.js。

您可以透過新增偵聽器來訪問日誌，如下所示：-

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

上面定義的函式是可選的。如果顯示錯誤，則它會將錯誤傳遞給 less.render 中存在的 callback 或 promise。

LESS - 線上編譯器

在本章中，我們將瞭解線上編譯器在 LESS 中的重要性。線上編譯器用於將 Less 程式碼編譯成 CSS 程式碼。線上編譯器工具可以輕鬆幫助生成 CSS 程式碼。以下是可用的線上 Less 編譯器：-

支援 Less 的線上 Web IDE/遊樂場

以下是支援 Less 的可用線上 Web IDE。

序號	線上 Web IDE & 描述
1	CSSDeck Labs 這是一個可以輕鬆建立涉及 HTML、CSS、JS 程式碼的測試用例的地方。
2	CodePen 這是前端 Web 的遊樂場。
3	Fiddle Salad 這是一個可以在環境中新增現有程式碼的地方。
4	JS Bin 這有助於 Javascript 和 CSS 程式碼。
5	jsFiddle 這是一個線上 Web 編輯器。

LESS - GUI

在本章中，我們將瞭解 LESS 的 GUI。您可以為您的平臺使用不同的 LESS 工具。有關 命令列用法和工具，請單擊此連結。

下表列出了支援跨平臺的 GUI 編譯器。

序號	工具 & 描述
1	Crunch 2! 它支援跨平臺，如 Windows、Mac 和 Linux。它提供帶有整合編譯的編輯器。
2	Mixture 它是一個由設計師和開發人員使用的快速原型設計和靜態站點生成工具。它快速、高效，並且可以很好地與您的編輯器配合使用。它彙集了一系列很棒的工具和最佳實踐。
3	SimpLESS 它是一個極簡的 LESS 編譯器。它提供拖放和編譯功能。SimpLESS 支援使用 prefixr 為您的 CSS 新增字首，這是 SimpLESS 的獨特功能。它構建在 Titanium 平臺上。
4	Koala 它用於編譯 LESS、SASS 和 CoffeeScript。它提供諸如編譯錯誤通知支援和編譯選項支援等功能。

下表列出了支援 Windows 平臺的 GUI 編譯器。

序號	工具 & 描述
1	Prepros 它是一個編譯 LESS、SASS、Compass、Stylus、Jade 等的工具。
2	WinLess 最初它是 LESS.app 的克隆，它有幾個設定並採用更完整的功能方法。它支援從命令列引數開始。

下表列出了支援 OS X 平臺的 GUI 編譯器。

序號	工具 & 描述
1	CodeKit 它是 LESS.app 的繼任者，並且支援 LESS 以及許多其他處理語言，如 SASS、Jade、Markdown 等。
2	LiveReload 它可以立即編輯 CSS 並更改影像。SASS、LESS、CoffeeScript 等都可以很好地工作。

下表列出了支援 OS X 平臺的 GUI 編譯器。

序號	工具 & 描述
1	Plessc 它是 lessc 的 GUI 前端。它具有日誌檢視器、自動編譯、使用所選編輯器開啟 LESS 檔案和源對映支援等功能。

LESS - 編輯器和外掛

在本節中，我們將瞭解編輯器和外掛在 LESS 中的重要性。編輯器是一個允許使用者編輯文字的系統或程式。外掛是一段用於擴充套件網站功能的軟體。

現在讓我們討論 LESS 的編輯器和 IDE。

序號	編輯器和 IDE 及其描述
1	Crunch! 它支援跨平臺，例如Windows、Mac和Linux。它提供帶有整合編譯功能的編輯器。
2	Mindscape Web Workbench 它提供 CoffeeScript、SASS、Compass 和 LESS 編輯，並在 Visual Studio 中簡化了現代 Web 開發。
3	NetBeans 它是一個基於 Java 的開源 IDE。這有助於快速開發桌面、移動和 Web 應用程式，以及涉及 HTML、JavaScript 和 CSS 的 HTML5 應用程式。
4	TextMate 它是一個適用於 Mac OS X 的通用圖形文字編輯器。它具有宣告性自定義、可錄製宏、程式碼片段、shell 整合、開啟文件選項卡和可擴充套件的 bundle 系統。
5	Vim Vim bundle 添加了諸如縮排、突出顯示和自動完成等功能，用於動態樣式表語言 LESS。
6	Emacs 它包含 less-css-model，該模型為 LESS CSS (lesscss.org) 提供了 Emacs 模式；Emacs 支援儲存時編譯。
7	JetBrains WebStorm 和 PhpStorm WebStrom 是一款輕量級且功能強大的 IDE。它完全配備了用於複雜的客戶端和伺服器開發（使用 Node.js）。PhpStorm 是一個 PHP IDE，它支援深度程式碼理解，併為所有主要工具和框架提供一流的編碼輔助和支援。
8	Brackets 它是一個輕量級、強大且開源的程式碼編輯器，可幫助 Web 設計師和前端開發人員。
9	CodeLobster 它是一個行動式整合開發環境 (IDE)，主要用於 PHP。它還支援 HTML、CSS 和 JavaScript 開發，並且提供了用於 Drupal、WordPress、Smarty、Joomla、JQuery、Facebook、Codeigniter、Yii 和 CakePHP 的外掛。
10	KineticWing IDE 它是一個快速、簡潔、輕量級且行動式的 IDE。它是一個全尺寸的開發套件，可幫助您高效快速地工作。
11	nodeMirror 它是一個開源且易於定製的 IDE。它利用了 CodeMirror.net、pty.js 和其他庫。
12	HTML-Kit Tools 這是一個用於 HTML5、CSS3、JavaScript 等的現代 Web 編輯器。藉助它，您可以從符合現代標準的編輯器中編輯、預覽、驗證、釋出和管理專案。

Sublime Text 2 & 3

以下表列出了Sublime Text為 LESS 提供的不同選項。

序號	選項和描述
1	Less-sublime 用於 Sublime Text 的 LESS 語法為.less檔案提供了語法高亮顯示以及程式碼片段。
2	Sublime-Less-to-CSS Sublime Text 2和3外掛，用於在儲存時將.less檔案編譯為 CSS。它需要在 PATH 中安裝lessc。
3	Less-build-sublime 用於Sublime Text 2的 LESS 構建系統，它為 LESS 檔案提供了兩種構建系統，分別是最小化和非最小化。
4	SublimeOnSaveBuild 它是一個簡單的Sublime Text 2外掛，用於在您單擊“儲存”時觸發構建。適用於 LESS、Compass 和任何其他預處理器。

Eclipse

Eclipse有兩個 LESS 外掛，如下表所示。

序號	外掛 & 描述
1	Eclipse Less 外掛透過擴充套件 Eclipse IDE，此外掛提供了編輯和編譯 LESS 樣式表的有用功能。
2	Transpiler 外掛此 Eclipse 外掛會自動轉換您的檔案，例如 LESS、SASS、CoffeeScript 等。

Visual Studio

Visual Studio有以下幾種 LESS 選項。

序號	選項和描述
1	CSS Is Less 此擴充套件使 LESS 檔案可以使用 CSS 語言服務開啟。
2	Web Essentials 2012 此擴充套件使您可以更輕鬆地執行常見任務，併為 Web 開發人員在 Visual Studio 中新增有用的功能。
3	Web Essentials 2013 它透過許多新功能擴充套件了 Visual Studio，這些功能並非特定於某種語言或編輯器。
4	Web Tools 2013 這有助於您執行涉及 ASP.NET 的開發任務。

Dreamweaver

使用Dreamweaver時，需要考慮以下幾點。

它是一個 Adobe 應用程式，Web 設計師和開發人員使用它來建立應用程式和網站。
它能夠跨多個平臺工作，包括瀏覽器、裝置和平板電腦。
Web 設計師使用 Dreamweaver 建立網站原型。
DMXzone Less CSS Compiler使所有 LESS CSS 功能直接在 Dreamweaver 中可用。

Notepad++ 6.x

使用Notepad++時，需要考慮以下幾點。

Notepad++ 是一個免費的文字編輯器和原始碼編輯器，支援選項卡式編輯，即在一個視窗中處理多個開啟的檔案。
用於 Notepad++ 的 LESS 是一個 xml 檔案，它為 .less 檔案提供語法高亮顯示或著色。要獲取更多資訊，請單擊此連結。
要安裝 Notepad++，請單擊此連結。

LESS - 第三方編譯器

Node.js 編譯器

以下是用於 LESS 的 Node.js 編譯器。

其他技術

以下是一些其他可幫助您編譯 LESS 程式碼的技術。

Wro4j Runner CLI

您可以下載wro4j-runner.jar，並使用以下命令將 LESS 程式碼編譯為 CSS。

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

您可以訪問以下連結以瞭解有關Wro4j Runner CLI的更多資訊。

CSS::LESSp

此模組用於將 LESS 檔案解析並編譯為 CSS 檔案。以下是用於編譯的命令。

lessp.pl styles.less > styles.css

您可以訪問以下連結以瞭解有關CSS::LESSp的更多資訊。

Windows 指令碼宿主

以下是將在 Windows 上執行的命令列編譯器。

cscript //nologo lessc.wsf input.less [output.css] [-compress]

或

lessc input.less [output.css] [-compress]

您可以訪問以下連結以瞭解有關Less.js for windows的更多資訊。

dotless

以下是在 Windows 上執行 dotless 的命令列編譯器。

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

您可以訪問以下連結以瞭解有關dotless的更多資訊。

LESS - 框架

UI/主題框架和元件

LESS 支援以下表中列出的一些 UI/主題框架。

序號	框架及描述
1	1pxdeep 它是一個扁平化的 Bootstrap 3 主題，提供強大的顏色方案控制。
2	Bootflat 它是一個基於 Bootstrap 的開源框架。
3	BootPress 它是一個基於平面檔案 CMS 的 PHP 框架。
4	Bootstrap 它是一個強大的移動優先前端框架，用於更快、更輕鬆的 Web 開發。
5	Bootstrap a11y 主題它為 Web 開發提供了易於訪問的功能。
6	Bootswatch 它是一個開源主題，為 Bootstrap 提供免費主題。
7	Cardinal 它是一個移動優先的 CSS 框架，允許維護響應式網站、使用者介面和應用程式的 CSS。
8	CSSHorus 它是一個庫，可輕鬆開發移動網站。
9	Flat UI Free 它基於 Bootstrap 3，包含基本和複雜元件，併為 Bootstrap 提供主題設計。
10	frontsize 它是一個前端框架，包含一組用於構建小部件的工具。
11	InContent 它使用 CSS3 和 SASS/LESS 指定影像的描述。
12	Ink 它建立響應式 Web 介面。
13	JBST 它是一個強大的主題框架，用於建立 WordPress 的子主題，並用作獨立的網站構建器。
14	KNACSS 它用於透過使用響應式和可擴充套件樣式表來開發 HTML/CSS 專案。
15	Kube 它是一個用於專業設計師和開發人員的 CSS 框架。
16	Metro UI CSS 它是一個前端框架，用於在專案中建立 Windows Metro 樣式。
17	Pre 它是一個使用 LESS 的 CSS 框架。
18	prelude 它是一個使用 LESS 的前端 CSS 框架。
19	Schema 它是一個輕量級且響應式的框架，有助於構建複雜的網站。
20	Semantic UI 它是一個使用者介面框架，使用 HTML 建立響應式佈局。
21	UIkit 它是一個前端框架，包含 HTML、CSS 和 JS 元件，易於使用和開發 Web 應用程式。
22	ngBoilerplate 它是一個基於 Grunt 的構建系統，用於 AngularJS 專案。
23	less-rail 它是一種動態樣式表語言，使用 Less.js 用於 Rails 專案。
24	Wee 它是一個前端框架，包含 HTML、CSS 和 JavaScript Bootstrap 元件，用於開發響應式 Web 專案。

網格系統

LESS 支援以下表中列出的網格系統框架。

序號	框架及描述
1	Flexible Grid System 它是一個 CSS 框架，以靈活的方式建立 Web 專案。
2	adaptGrid 它是一個用於開發 Web 應用程式的響應式網格系統。
3	Fluidable 它是一個基於 LESS 預處理器的輕量級響應式網格系統。
4	Golden Grid System 它是一個用於響應式設計的網格系統。
5	LESS Zen Grid 它用於解決子畫素舍入問題。
6	Order.less 這是一個用於對齊、網格系統和模組化縮放的 LESS 庫。
7	響應式這是一個可定製的獨立網格系統。
8	響應式樣板這是一個輕量級的網格系統，用於為網站建立響應式網頁設計。
9	Semantic.gs 它是 Web 瀏覽器將其預設分發到其作業系統。

Mixin 庫

LESS 提供如下表所示的 mixin 庫：

序號	框架及描述
1	3L 它為 LESS 預處理器提供了最新的 CSS3 功能。
2	animate 這是一個用於專案中使用的瀏覽器動畫的庫。
3	Clearless 它使用可重用的 LESS mixin，而不會破壞樣式並在樣式表中建立過大的尺寸。
4	Css3LessPlease 它將 css3please.com 轉換為 LESS mixin，並且當您執行 CSS 時，元素將立即發生更改。
5	CssEffects 它提供了作為 LESS mixin 編寫的 CSS 樣式效果。
6	Cssowl 這是一個 mixin 庫，支援 LESS、SASS 和 Stylus。
7	cube.less 它是一個僅使用 CSS 建立的 3D 動畫立方體。
8	tRRtoolbelt.less 這是一個庫，提供 mixin 和函式來對 LESS 檔案執行操作。
9	est 它基於 LESS，允許更有效地編寫 LESS 程式碼。
10	Hexagon 它建立具有大小和顏色的 CSS 六邊形。
11	homeless 這是一個包含 Less.js 有用函式的 mixin 庫。
12	LESS 元素它是一組用於 LESS 預處理器的 mixin。
13	LESS Hat 這是一個 mixin 庫，有助於為所有瀏覽器匯出 CSS，並建立許多陰影、漸變和動畫等。
14	lessley 它是一個用 LESS 編寫的測試套件。
15	LESS-bidi 它是一組 LESS mixin，提供雙向樣式而無需重複程式碼。
16	LESS-Mix 它是一個用 LESS 編寫的 mixin 庫。
17	media-query-to-type 它用於建立媒體查詢，允許 Internet Explorer 8 及以下版本訪問內容。
18	More-Colors.less 它提供用於在設計 Web 應用程式時進行顏色操作的變數。
19	more-less 這是一個允許編寫跨瀏覽器相容的 CSS 程式碼的庫。
20	More.less 它是 Compass 和 Twitter Bootstrap 的組合，透過使用 CSS3 和跨瀏覽器 mixin 為 LESS 提供更多功能。
21	more-or-less 它為 less.js 提供強大的 mixin。
22	normalize.less 它使用 LESS 提供標準化的 CSS。
23	Oban 它是一組 mixin，可以加快 Web 應用程式的開發過程。
24	Preboot 它是一組 LESS 服務，使用 mixin 和變數編寫更好的 CSS，並從 Bootstrap 中形成。
25	prelude-mixins 它是一個 LESS mixin 庫。
26	Shape.LESS 它提供許多 mixin 用於指定應用程式的各種形狀。

列印頁面

序號	變數用法和描述
1	概述透過使用變數可以避免多次重複相同的值。
2	變數插值變數也可以用於其他地方，例如選擇器名稱、屬性名稱、URL和@import語句。
3	變數名稱我們可以使用包含值的變數名稱定義變數。
4	延遲載入在延遲載入中，即使變數未被使用，也可以使用它們。
5	預設變數預設變數具有僅在變數未設定時才設定變數的功能。此功能不是必需的，因為可以透過稍後定義變數來輕鬆覆蓋變數。

序號	型別和描述
1	附加到選擇器的擴充套件擴充套件連線到一個選擇器，看起來類似於具有選擇器作為引數的偽類。
2	規則集內的擴充套件 &:extend(selector)語法可以放在規則集的主體內部。
3	擴充套件巢狀選擇器巢狀選擇器使用extend選擇器進行匹配。
4	使用擴充套件進行精確匹配預設情況下，extend會在選擇器之間查詢完全匹配。
5	第 n 個表示式第 n 個表示式的形式在擴充套件中很重要，否則它會將選擇器視為不同的。
6	擴充套件“all” 當在extend引數的最後識別到關鍵字all時，LESS 會將該選擇器匹配為另一個選擇器的一部分。
7	使用擴充套件進行選擇器插值 extend可以連線到插值選擇器。
8	@media 中的範圍/擴充套件擴充套件僅匹配存在於同一媒體宣告中的選擇器。
9	重複檢測它無法檢測選擇器的重複。

序號	型別和描述
1	經典用例經典用例用於避免在 LESS 中新增基類。
2	減小 CSS 大小擴充套件用於將選擇器移動到您要使用的屬性儘可能遠的位置；這有助於減少生成的 css 程式碼。
3	組合樣式/更高階的混合使用擴充套件，我們可以將特定選擇器的相同樣式組合到其他選擇器中。

序號	混合用法和描述
1	不輸出混合可以透過簡單地在混合後面放置括號來使混合在輸出中消失。
2	混合中的選擇器混合不僅可以包含屬性，還可以包含選擇器。
3	名稱空間名稱空間用於將混合分組到一個通用名稱下。
4	受保護的名稱空間當將保護應用於名稱空間時，僅當保護條件返回 true 時才使用由其定義的混合。
5	!important 關鍵字 !important關鍵字用於覆蓋特定屬性。

序號	型別和描述
1	具有多個引數的混合引數可以使用逗號或分號分隔。
2	命名引數混合透過使用引數名稱而不是位置來提供引數值。
3	@arguments 變數當呼叫混合時，@arguments包含所有傳遞的引數。
4	高階引數和@rest變數混合透過使用....獲取可變數量的引數。
5	模式匹配透過向混合傳遞引數來更改混合的行為。