@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; }
注意：被匯入的檔案不能是區域檔案方式（在前面不能加_）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499097.html
標籤：Html/Css
上一篇：利用噪聲構建美妙的 CSS 圖形
下一篇：XML入門介紹