Sass @import 和部分檔案
Sass 能夠讓 CSS 程式碼保持 DRY（Don't Repeat Yourself，不要重複自己）。編寫 DRY 程式碼的一種方式是將相關的程式碼放在單獨的檔案中。
您可以建立包含 CSS 片段的小檔案，並在其他 Sass 檔案中包含它們。這些檔案的例子可以是：重置檔案、變數、顏色、字型、字號等。
Sass 匯入檔案
就像 CSS 一樣，Sass 也支援 @import 指令。
@import 指令允許您將一個檔案的內容包含到另一個檔案中。
CSS 的 @import 指令由於效能問題存在一個主要的缺點；每次呼叫它都會建立一個額外的 HTTP 請求。然而，Sass 的 @import 指令會將檔案包含到 CSS 中；因此在執行時不需要額外的 HTTP 呼叫！
Sass Import 語法
@import 檔名;
提示： 您不需要指定副檔名，Sass 會自動假定您指的是 .sass 或 .scss 檔案。您也可以匯入 CSS 檔案。@import 指令會匯入檔案，並且在匯入檔案中定義的任何變數或 mixin 都可以在主檔案中使用。
您可以在主檔案中匯入任意數量的檔案
示例
@import "variables";
@import "colors";
@import "reset";
讓我們來看一個例子：假設我們有一個名為 "reset.scss" 的重置檔案，內容如下
示例
SCSS 語法 (reset.scss)
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
現在我們想將 "reset.scss" 檔案匯入到另一個名為 "standard.scss" 的檔案中。
我們這樣做：通常將 @import 指令放在檔案的頂部；這樣它的內容將具有全域性作用域
SCSS 語法 (standard.scss)
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
因此，當 "standard.css" 檔案被轉譯時，CSS 將如下所示
CSS 輸出
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass 部分檔案
預設情況下，Sass 會直接轉譯所有 .scss 檔案。但是，當您想匯入一個檔案時，您不需要該檔案被直接轉譯。
Sass 有一個機制來實現這一點：如果您在檔名開頭新增下劃線，Sass 將不會轉譯它。這樣命名的檔案在 Sass 中稱為部分檔案（partials）。
所以，一個部分 Sass 檔案是用一個前導下劃線命名的
Sass 部分檔案語法
_檔名;
下面的例子展示了一個名為 "_colors.scss" 的部分 Sass 檔案。（此檔案不會直接轉譯為 "colors.css"）
示例
"_colors.scss"
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
現在，如果您匯入部分檔案，請省略下劃線。Sass 會理解它應該匯入 "_colors.scss" 檔案
示例
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
