和 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%);
}