LESS - 导入指令

LESS的导入指令 - 从简单和简单的步骤开始，从简单和简单的步骤学习，包括概述，安装，嵌套规则，嵌套指令和冒泡，操作，转义，函数，命名空间和访问器，范围，注释，导入，变量， Extend，Mixins，Parametric Mixins，Mixins作为函数，将规则集传递给Mixins，导入指令，导入选项，Mixin Guards，CSS Guards，循环，合并，父选择器，其他函数，字符串函数，列表函数，数学函数，类型函数，颜色定义功能，颜色通道功能，颜色操作，颜色混合功能，命令行使用，在浏览器中使用较少，浏览器支持，插件，编程使用，在线编译器，GUI，编辑器和插件，第三方编译器，框架。

描述

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

例如，您可以使用 @import 关键字导入文件as @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文件 :

         Import Directives                  Example of Import Directives
      Welcome to Tutorialspoint...

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

import_dir.less

.myline {   font-size: 20px;}

现在，创建 style.less 文件.

style.less

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

import_dir.less 文件将导入 style.less 文件来自路径 https://www.it1352.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文件，将显示以下输出.

导入指令