合并

它是LESS的一个特性，它允许使用单个属性从多个属性中为逗号或空格分隔列表添加值。它可以用于背景和变换属性。

下表描述了合并支持的两种类型的功能。

类型	描述
Comma	它增加了属性值到最后。
Space	它添加属性值与空格。

逗号

它添加属性值到最后。

例子

下例演示了在LESS文件中使用合并逗号功能：

<!doctype html>
<head>
   <title>Merge Comma</title>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Merge Comma</h2>
   <p class="class">Hello World!!!Welcome to Tutorialspoint...</p>
</body>
</html>

接下来，创建文件 style.less 。

.myfunc() {
  box-shadow+: 5px 5px 5px grey;
}
.class {
  .myfunc();
  box-shadow+: 0 0 5px #f78181;
}

您可以使用以下命令将 style.less 编译为 style.css ：

lessc style.less style.css

接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件：

.class {
  box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}

输出

让我们执行以下步骤，看看上面的代码如何工作：

在 merge_comma.html 文件中保存html代码。

在浏览器中打开此HTML文件，将显示如下输出。

Example of Merge Comma
Hello World!!!Welcome to Tutorialspoint...

空间

这是merge的另一个特性，它添加了属性值和空格。

例子

下面的示例演示了在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 。

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

合并使用 + 或 + _ 标志来避开每个连接上意外的连接。 transform 属性修改CSS格式化模型的空间，并可用于旋转，缩放，移动等元素。

您可以使用以下命令将 style.less 编译为 style.css ：

lessc style.less style.css

接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件：

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

输出

让我们执行以下步骤，看看上面的代码如何工作：

在 merge_space.html 文件中保存上述HTML代码。

在浏览器中打开此HTML文件，将显示如下输出。

Example of Merge Space
Hello World!!!Welcome to Tutorialspoint...

合并

合并

逗号

例子

输出

空间

例子

输出

选择支付方式：