Less的@import指令
来源:互联网 发布:vue.js开发app实例 编辑:程序博客网 时间:2024/05/20 11:21
Less的@import指令
Less中,可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置,导入文件时的处理方式取决于文件的扩展名:
- 如果扩展名是 .css,文件内容将被原样输出。
- 如果是任何其他扩展名,将作为LESS文件被导入。
- 如果没有扩展名,将给他添加一个 .less 的扩展名,并作为LESS文件被导入。
例如:
@import "style"; // 导入 style.less
@import "style.less"; // 导入style.less
@import "style.php"; // style.php 作为LESS文件被导入
@import "style.css"; // 文件内容被原样输出
一个网站常常是有多个模块组成,如果只使用一个 .less 文件,编辑起来非常不便,也不利于分工协作。此时,就可以为每个模块单独创建 .less 文件,然后通过 @import指令将它们合并成一个文件。
假如一个网站包含产品、新闻、BBS三个模块,就可以为每个模块单独创建一个 .less 文件,分别是 product.less、news.less、bbs.less。然后,在 style.less 中,通过 @import指令将它们合并成一个文件:
@import "product.less";
@import "news.less";
@import "bbs.less";
导入外部文件的一个常见应用场景,就是变量共享。通常是在一个 .less 文件中定义一些变量,其他文件只需导入这个 .less 文件,就可以使用这些变量。如,在 base.less 中定义 @color 变量:
@color: #fff;
然后,在 styles.less 文件中,只需使用 @import指令导入base.less 文件,就可以使用它的变量 @color,而不必重复定义。代码如下:
@import "base.less";
.myclass {
background-color: @color;
}
styles.less 编译后的CSS代码为:
.myclass {
background-color: #fff;
}
另外,为了在将Less文件编译生成CSS文件时,提高对外部文件的操作灵活性,还为@import指令提供了一些配置项。语法为:
@import (keyword) "filename";
@import指令的配置项及其含义见表 2‑1。
一个@import指令可以使用一个或多个配置项,当使用多个配置项时,各配置项之间用逗号隔开。如:
@import (optional, reference) "foo.less";
阅读全文
0 0
- Less的@import指令
- #import指令与#include指令的区别
- 在webpack的less中使用绝对路径import
- #import 指令
- #import 指令
- #import 指令
- #import 指令
- @Import指令:导入指令
- VC++中的Import指令的使用
- Linux指令--more,less
- Linux-less指令
- [C++] #import 指令
- Object-C #import 指令
- vc #import 指令
- #import 指令 (c++)
- #import 指令 (C++)
- #import预处理指令
- #import 指令 C++
- 不用加减乘除做加法
- 自定义ListView
- mac vim 默认显示行号
- ASP.NET Razor
- Jeesite添加自定义tld标签的方式
- Less的@import指令
- ASP.NET MVC 教程
- 入门 node.js 你必须知道的那些事
- 介绍Spring Cloud构建微服务架构
- ASP.NET MVC
- js获取jstl域中的值
- 深入理解Java内存模型(七)——总结
- Abstraction Mechanis,
- Oracle Spacial(空间数据库)创建空间字段示例