开发学院

您的位置:首页>教程>正文

教程正文

LESS 导入指令

LESS 导入指令

  @import指令用于导入代码中的文件,它将LESS代码扩展到不同的文件,可以轻松维护代码的结构,您可以将@import语句放在代码中的任何地方。

  例如,您可以使用@import "file_name.less"关键字来导入文件,.

文件扩展名

  •   您可以使用@import语句,具体取决于不同的文件扩展名,例如

  •   如果你使用.CSS扩展,然后将被视为CSS,@import语句保持原样。

  •   如果它包含任何其他扩展,则它将被视为LESS,将被导入。

  •   如果没有LESS扩展名,则它将附加并包括作为导入的LESS文件。

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

例子

<!doctype html>
   <head>
      <title>Import Directives</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 "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

  import_dir.less 将从路径https://www.tutorialspoint.com/less/import_dir.less.导入style.less

  使用下面的命令编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

输出

  执行下面步骤

  •   保存html代码到import_directives.html文件.

  •   在浏览器中观察结果

less_import_directive.jpg