導入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()值