Sass导入其它Sass文件

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

index.scss 内容如下:

@import "center";

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

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

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

image-20210815133208112

posted @ 2021-08-15 13:34  BNTang  阅读(300)  评论(0)    收藏  举报