在本教程中,我们将学习@import和@use的功能,并举例说明两者的区别。
SASS中的@import指令
@import是用来导入css和sass样式的,你知道SASS是开放源码的预处理语言,用于应用@import指令规则 @import在css中是用来将一个文件的样式导入到其他css样式中的,SASS也是这样工作的,唯一的区别是css在导入时要额外调用http,SASS不会额外调用。其他的区别是SASS导入了其他功能的混合器、参数和所有其他功能。这种方法的优点是可重复使用,不重复代码
语法
@import "filename"
如果你把所有与颜色相关的样式放在colors.scss中,然后导入main.scss中。
在两者中都使用了@import来将样式表文件纳入其他样式表。
| CSS | SASS |
|---|---|
| 只支持CSS文件 | 只支持.sass和.scss扩展名 |
| 导入的文件声明不会在包含的文件中被删除 | 导入文件的声明不存在,内容将被替换到包含的sass文件中。 |
| 性能不好,导入css资源会产生额外的http调用 | 性能很好,不需要调用HTTP |
| css导入CSS支持的功能 | 它导入混合器、参数和SASS语言的所有功能 |
| css在运行时导入内容 | 这将在编译或运行时导入内容 |