Sass -- 变量、计算、导入

文章目录

变量

在Sass中,支持使用变量,变量以$开头

变量使用

Sass不存在变量提升,变量必须先定义再使用

Sass -- 变量、计算、导入
如果需要将变量在字符串中使用,需将变量写在#{}中
Sass -- 变量、计算、导入

计算

在Sass中,允许数值运算
Sass -- 变量、计算、导入

导入

Sass 类似 CSS,支持 @import 指令导入其他文件。

私有Sass文件

将Sass文件名前加上下划线_(例:_demo.scss),表示该文件为私有文件,该文件只会被其他文件引入,VScode不会对它进行编译生成CSS文件。

将变量单独存放在私有文件_demo2.scss中;
Sass -- 变量、计算、导入
通过@import指令,将私有文件_demo2.scss引入到demo.scss文件;

注意:
引入私有文件时,不需要写下划线_
引入文件时可以不指定文件后缀,Sass 会自动添加后缀;

Sass -- 变量、计算、导入

Sass @import 与 CSS @import 的区别

Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求;

CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求

上一篇:安装 node-sass 遇到的问题 解决办法


下一篇:vue设置全局样式:loadOptions