Less 传递规则集 - 蝴蝶教程

定义

分离的规则集包含规则集，例如属性，嵌套规则集，变量声明，mixins等。它存储在变量中，并包含在另一个结构中。规则集的所有属性都将复制到该结构。

示例

以下示例显示如何在LESS文件中传递规则集进行混合--

passing_ruleset.html

  <!doctype html>
  <head>
      <meta charset="UTF-8" />
      <title>蝴蝶教程(jc2182.com)</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
  </head>
  <body>
      <div class="cont">
        <h1>欢迎来到蝴蝶教程</h1>
        <p class="myclass">网络上最大的教程库。</p>
      </div>
  </body>
  </html>

现在让我们创建一个与 CSS 非常相似的文件 style.less，唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这几个文件都应在 F 盘的文件夹 lesscode 内创建。

style.less

  @detached-ruleset: {
    .mixin() {
       font-family: "Comic Sans MS";
       background-color: #AA86EE;
    }
 };
 
 .cont {
    @detached-ruleset();
    .mixin();
 }

使用以下命令将 style.less 文件编译为 style.css-

  PS F:\lesscode> lessc style.less style.css

当您运行上述命令时，它将自动创建style.css文件。每当您更改LESS文件时，都需要在cmd中运行上述命令，然后style.css文件将得到更新。

运行以上命令时，style.css文件将具有以下代码-

style.css

  .cont {
    font-family: "Comic Sans MS";
    background-color: #AA86EE;
 }

输出结果

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

将上面的 html 代码保存在 passing_ruleset.html 文件中。

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

如果不懂以上命令操作，请先阅读我们 Less 安装