@import

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

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為廣昌等服務建站，廣昌等地企業(yè)，進行企業(yè)商務咨詢服務。為廣昌企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

例如：

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的區(qū)別

但是如下的幾種方式，都將作為普通的 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程序監(jiān)測，目錄下的所有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，可以沒有下劃線(__)，這是允許的，這也就意味著，同一個目錄下不能同時出現(xiàn)兩個相關(guān)名的sass文件（一個不帶_，一個帶_），添加下劃線的文件將會被忽略。

嵌套 @import

?

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

base.scss

.main-color{
  color: #F00;
}

index.scss

.container{
  @import "base";
}

最后生成

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

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