上一节:
下一节:

  Less Mixins

  • 定义

    Mixins 与编程语言中的函数相似。 Mixins 是一组 CSS 属性，允许您将一个类的属性用于另一个类，并包括类名作为其属性。在LESS中，您可以使用类或id选择器以与CSS样式相同的方式声明混合。它可以存储多个值，并在必要时可以在代码中重用。

  • 用法

    下表详细说明了LESS mixins的用法。
    序号 描述
    1
    不输出Mixin
    只需将括号放在输出之后，即可使Mixin在输出中消失。
    2
    Mixins中的选择器
    mixins不仅可以包含属性，还可以包含选择器。
    3
    命名空间
    命名空间用于按通用名称对混合包进行分组。
    4
    受保护的命名空间
    当将保护应用于名称空间时，仅当保护条件返回true时，才使用由它定义的混合
    5
    !important关键字
    !important关键字用于覆盖特定属性。

  • 示例

    以下示例演示了在LESS文件中Mixins的使用-

    less_mixins.html

    <!doctype html>
<head>
   <meta charset="UTF-8" />
   <title>菜鸟教程(cainiaoya.com)</title>
   <link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
    <div class = "style">
      <h2>欢迎来到菜鸟教程</h2>
      <p class="p1">LESS是CSS预处理程序，可启用自定义，
      可管理且可重复使用的网站样式表。</p>
      <p class="p2">LESS是一种动态样式表语言，可扩展CSS的功能。</p>
      <p class="p3">LESS是是跨浏览器友好的。</p>
    </div>
</body>
</html>
    现在让我们创建一个与 CSS 非常相似的文件 style.less，唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这些文件都应在 F 盘的文件夹 lesscode 内创建。

    style.less

    .p1 {
  color:red;
}

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

.p3 {
  background : #LESS520;
 .p1;
}
    使用以下命令将 style.less 文件编译为 style.css- 
    PS F:\lesscode> lessc style.less style.css
    当您运行上述命令时，它将自动创建style.css文件。 每当您更改LESS文件时，都需要在cmd中运行上述命令，然后style.css文件将得到更新。
    运行以上命令时，style.css文件将具有以下代码-

    style.css

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

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

  • 输出结果

    现在让我们执行以下步骤，看看上面的代码如何工作-
    将上面的 html 代码保存在 less_mixins.html 文件中。
    在浏览器中打开此 HTML 文件，将显示以下输出。
    less
    如果不懂以上命令操作，请先阅读我们 Less 安装
上一节:
下一节: