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; 两个语句都执行相同操作。

打印页面

序号	混合用法及说明
1	不输出混合可以通过在混合后面简单地放置括号来使其在输出中消失。
2	混合中的选择器混合不仅可以包含属性，还可以包含选择器。
3	命名空间命名空间用于将混合分组到一个通用名称下。
4	受保护的命名空间当将保护应用于命名空间时，仅当保护条件返回 true 时，才会使用由其定义的混合。
5	!important 关键字 !important 关键字用于覆盖特定属性。