模块化

css 模块化

@import url; url 可以是绝对路径，也可以是相对路径。类型可以是<string>或<url>。

@import url;

@import url list-of-media-queries;

css 的 @import 是运行时的，需要运行的时候才知道导入的内容。

sass 模块化

@import

sass 也可以使用@import但这个时候可能是 css 的运行时，也可能是 sass 的编译时，不需要运行的时候知道导入的内容。

@import "var.scss";
@import url< "common.scss" >; // sass不支持url类型，这时候可能是 css 的运行时

sass 的@import 有以下缺陷：

• 容易混淆 不知道是 css 的运行时还是 sass 的编译时。
• 污染。 如果导入的多个模块中有相同的属性，那么最后一个会覆盖前面的。
• 无私有属性。

@use

@use 是新出的也是 sass 官方推荐的实现模块化的导入。可以解决上面的缺陷。