sass 導入@import詳解

@import

​ Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合併編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變數或者混合指令 (mixin) 都可以在導入的文件中使用。

例如：

public.scss

$font-base-color:#333;

index.scss

@import "public";
$color:#666;
.container{
    border-color: $color;
    color: $font-base-color; 
}

編譯後：

.container { border-color: #666; color: #333; }

註意：跟我們普通css裡面@import的區別

但是如下的幾種方式，都將作為普通的 CSS 語句，不會導入任何 Sass 文件

• 文件拓展名是 .css；
• 文件名以 http:// 開頭；
• 文件名是 url()；
• @import 包含 media queries。

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";

局部文件(Partials)

​ Sass源文件中可以通過@import指令導入其他Sass源文件，被導入的文件就是*局部文件*，局部文件讓Sass模塊化編寫更加容易。

​ 如果一個目錄正在被Sass程式監測，目錄下的所有scss/sass源文件都會被編譯，但通常不希望局部文件被編譯，因為局部文件是用來被導入到其他文件的。如果不想局部文件被編譯，文件名可以以下劃線 （_）開頭

_theme.scss

$border-color:#999;
$background-color:#f2f2f2;

index.scss

@import "public";
@import "theme";
$color:#666;
.container{
    border-color: $border-color;
    color: $font-base-color; 
    background-color: $background-color;
}

編譯後：

.container { border-color: #999; color: #333; background-color: #f2f2f2; }

​ 可以看到，@import 引入的_theme.scss，可以沒有下劃線(__)，這是允許的，這也就意味著，同一個目錄下不能同時出現兩個相關名的sass文件（一個不帶_，一個帶_），添加下劃線的文件將會被忽略。

嵌套 @import

​

​ 大多數情況下，一般在文件的最外層（不在嵌套規則內）使用 @import，其實，也可以將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出現在嵌套的層中。

base.scss

.main-color{
    color: #F00;
}

index.scss

.container{
    @import "base";
}

最後生成

.container .main-color { color: #F00; }

註意：被導入的文件不能是局部文件方式（在前面不能加_）