导入SASS文件

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局部文件之前声明了一个$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()值