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 @   BNTang  阅读(283)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示