教程 > LESS 教程 > Less 特征 阅读：86

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文件导入s a less file
@import "style.css";  // 它将保持声明原样

示例

下面的例子演示了LESS文件中Import 指令的使用

operations.html

<!doctype html>
   <head>
      <title>迹忆客(jiyik.com) - Import 指令</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

然后，创建文件 style.less。

style.less

@import "import_dir.less";
.myline {
   color:#FF0000;
}

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

$ lessc style.less style.css

执行上述命令； 它将使用以下代码自动创建 style.css 文件

style.css

.myline {
  font-size: 20px;
}
.myline {
  color: #FF0000;
}

按照以下步骤查看上述代码的工作原理

  • 将上述 html 代码保存在 import_dir.html 文件中。
  • 在浏览器中打开此 HTML 文件，将显示以下输出。

Less Import 指令

查看笔记

扫码一下
查看教程更方便