LESS - 合併空格

描述

合併空格功能新增帶有空格的屬性值。

示例

以下示例演示了在 LESS 檔案中使用合併空格功能：

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

   <body>
      <h2>Example of Merge Space</h2>
      <p class = "class">Hello World!!!Welcome to Tutorialspoint...</p>
   </body>
</html>

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

style.less

.mixin() {
   transform+_: scale(1);
}

.class {
   .mixin();
   transform+_: rotate(2deg);
}

合併使用+或+_標誌來避免每次連線時意外的連線。transform屬性修改CSS格式化模型的空格，可用於旋轉、縮放、移動等，以及對元素執行其他功能。

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

lessc style.less style.css

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

style.css

.class {
   transform: scale(1) rotate(2deg);
}

輸出

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

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

less_merge.htm

列印頁面