Sass导入其它Sass文件

和 LESS 一样 SASS 文件中也支持导入其它 SASS 文件，其实原生的 CSS 也支持通过 @import 导入其它的 CSS 文件，只不过不常用，不常用的原因在于原生的 @import 导入其它的 CSS 文件，只有执行到 @import 时浏觅器才会去下载对应 CSS 文件，这导致请求次数变多，页面加载起来特别慢，而 LESS 和 SASS 中的 @import 是直接将导入的文件拷贝到当前文件中生成一份 CSS，所以只会请求一次，速度更快：

index.scss 内容如下：

代码语言：scss复制

@import "center";

div {
  width: 200px;
  height: 200px;
  background: red;
  @include center;
}

新建一个 center.scss 文件内容如下：

代码语言：scss复制

@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

image-20210815133208112

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

2023腾讯·技术创作特训营第二期

0 人点赞