以下是一些关于 Less @import 指令的基本用法：
1. 导入本地文件：
// 导入本地文件
@import "styles.less";
// 使用导入的样式
.my-element {
color: @main-color; // 使用导入的变量
}
在这个例子中，@import "styles.less"; 导入了名为 "styles.less" 的本地 Less 文件。导入文件中定义的变量（例如 @main-color）可以在当前文件中使用。
2. 导入 URL：
// 导入远程资源
@import "https://fonts.googleapis.com/css?family=Open+Sans";
// 使用导入的样式
body {
font-family: 'Open Sans', sans-serif;
}
通过 @import 指令，你可以导入远程资源，比如 Google Fonts。这允许你在样式表中使用远程资源的样式。
3. 导入多个文件：
// 导入多个文件
@import "variables.less";
@import "mixins.less";
// 使用导入的变量和混合
.my-element {
color: @main-color;
.rounded-corners(5px);
}
你可以在样式表中多次使用 @import 指令，以导入多个文件。这有助于将样式拆分为更小的模块，提高代码的可维护性。
4. 导入顺序：
Less 编译时会按照导入语句的顺序依次处理文件。导入的顺序可能影响最终生成的样式表。确保按照逻辑和依赖关系正确地组织文件和导入语句。
// 正确的导入顺序
@import "reset.less";
@import "variables.less";
@import "styles.less";
在这个例子中，首先重置样式（reset.less），然后导入变量（variables.less），最后导入主要样式（styles.less）以确保正确的覆盖和继承关系。
Less 的 @import 指令是一个强大的工具，使得样式表能够更好地组织和管理。
转载请注明出处：http://www.zyzy.cn/article/detail/4294/Less