基本导入:
// styles.less
@primary-color: #3498db;
@font-size: 16px;
// main.less
@import "styles.less";
body {
color: @primary-color;
font-size: @font-size;
}
在上述例子中，main.less 文件通过 @import "styles.less"; 导入了 styles.less 文件，使得 main.less 中可以使用 styles.less 中定义的变量。
导入 URL:
你还可以使用 @import 导入远程资源或库，例如：
@import "https://fonts.googleapis.com/css?family=Open+Sans";
body {
font-family: 'Open Sans', sans-serif;
}
导入顺序:
Less 编译时会按照导入语句的顺序依次处理文件。因此，导入的顺序可能影响最终生成的样式表。确保按照逻辑和依赖关系正确地组织文件和导入语句。
导入适用性:
一般来说，Less 的 @import 指令比 CSS 的 @import 更强大，因为它不会在运行时增加 HTTP 请求，而是在编译时将导入的文件合并到一个单独的 CSS 文件中。这有助于减少页面加载时的请求数量。
需要注意的是，在 Less 中，文件的扩展名通常可以省略，Less 编译器会自动查找相应的文件。但在某些情况下，为了明确文件类型，建议使用文件扩展名。
转载请注明出处：http://www.zyzy.cn/article/detail/4287/Less