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

打印页面