CSS @import 深入用法
1 常用css3的@ At规则有4种类
@document
@import
@supports
@media
2 @import 的几种引入方式
@import 默认引入less方式读取,出css之外: example:
- @import "foo"; // foo.less 导入为less文件
- @import "foo.less"; // foo.less 导入为less文件
- @import "foo.php"; // foo.php 导入为less文件
- @import "foo.css"; // 语句保持原样,导入为css文件
属性 | 作用 | 释义 |
---|---|---|
reference | 使用该less文件但是不输出它 | 使用@import (reference) 导入外部文件,导入的样式不会添加到编译输出,除非该样式被引用。 |
inline | 包括在源文件中输出,但是不作处理 | 当一个css文件可能无法被less所兼容时 |
less | 将该文件视为less文件,无论扩展名是什么 | |
css | 将文件视为css文件,无论扩展名是什么 | |
once | 该文件仅可导入一次 (默认) | 文件只会被导入一次,后续的导入相同文件的语句会被忽略。 |
multiple | 该文件可以多次导入 | 文件重复被引入多次 |
optional | 当没有发现文件时仍然编译 | 避免导入不存在的less文件,如果没有这个参数会报 File Error 错误 |
举栗(可以使用多个关键字,同时生效)
example:
@import (optional, reference) "foo.less";
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步