描述

@import指令用于在代码中导入文件。它将LESS代码分布在不同的文件中，并允许轻松维护代码的结构。您可以将@import语句放在代码中的任何位置。

例如，您可以使用@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

例

以下示例演示了SCSS文件中变量的用法-

      
   

   
      
Example of Import Directives
      
Welcome to Tutorialspoint...
   

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

import_dir.less

.myline {
   font-size: 20px;
}

现在，创建style.less文件。

无样式

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

该import_dir.less文件将得到导入从路径style.less文件https://www.tutorialspoint.com/less/import_dir.less 。

您可以使用以下命令将style.less编译为style.css-

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

输出

请按照以下步骤查看上面的代码如何工作-

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