3.导入SASS文件
3-1.使用SASS部分文件
局部文件:不需要生成对应的独立css文件,这样的sass文件称为局部文件
sass局部文件的文件名以下划线开头
例如:_night-sky.scss,你在引用的时候可以省略文件名的下划线
3-2.默认变量值
!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
// _night-sky.scss文件
$span-color: #f00 !default;
$span-color: #00f;
@import "./night-sky";
div {
span {
color: $span-color;
}
}
用户在导入你的sass局部文件之前声明了一个 s p a n − c o l o r 变 量 , 那 么 你 的 局 部 文 件 中 对 span-color变量,那么你的局部文件中对 span−color变量,那么你的局部文件中对span-color赋值#f00的操作就无效,反之有效。
3-3.嵌套导入
sass 允许 @import 命令写在 css 规则内,这种导入方式下,生成对应的 css文件时,局部文件会被直接插入到 css 规则内导入它的地方。
// 这是_night-sky.scss文件
h2 {
color: #f00;
font-size: 30px;
}
main {
@import "./night-sky";
}
3-4.原生的CSS导入
由于 sass 兼容原生的css,所以它也支持原生的CSS@import。尽管通常sass中使用@import时,sass会尝试找对应的sass文件并导入进来,但在下列三种情况下会生成原生的 CSS@import, 造成浏览器解析css时额外下载:
- 被导入文件的名字以.css结尾;
- 被导入文件的名字是一个URL地址(比如:http://www.sass.hk/css/css.css)
- 被导入文件的名字是css的url()值