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"; // 它将保留原有语句
示例
以下示例演示了在 SCSS 文件中使用变量 −
<!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>
Next, create the import_dir.less file.
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 文件中。
您可以使用以下命令将 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 文件，将显示以下输出。
