上一节:
下一节:

  Less @import 指令

  • 定义

    @import 指令用于在代码中导入文件。 它将LESS代码分布在不同的文件中，并允许轻松维护代码的结构。 您可以将 @import 语句放在代码中的任何位置。
    例如，您可以使用 @import 关键字作为 @import “file_name.less” 来导入文件。

  • 文件扩展名

    您可以根据不同的文件扩展名使用 @import 语句，例如-
    如果使用的是 .css 扩展名，则将其视为 CSS，并且 @import 语句保持不变。
    如果它包含任何其他扩展名，则将其视为LESS并将导入。
    如果没有 LESS 扩展名，则它将扩展并作为导入的 LESS 文件包括在内。 
    @import "style"; //导入style.less
@import "style.less"; //导入style.less
@import "style.php"; //将style.php导入为一个less的文件
@import "style.css"; //它将保持原样

  • 示例

    以下示例显示如何在LESS文件中@import指令的用法--

    import_directives.html

      <!doctype html>
  <head>
      <meta charset="UTF-8" />
      <title>菜鸟教程(cainiaoya.com)</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
  </head>
  <body>
        <h1>欢迎来到菜鸟教程</h1>
        <p class="myline">网络上最大的教程库。</p>
  </body>
  </html>
    现在让我们创建一个与 CSS 非常相似的文件 style.less 和 import_dir.less，唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这几个文件都应在 F 盘的文件夹 lesscode 内创建。

    import_dir.less

    .myline {
  font-size: 20px;
}

    style.less

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

    style.css

      .myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

  • 输出结果

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