Sass @import
Sass 可以讓我們減少可以幫助我們減少 CSS 重複的代碼，節省開發時間。
我們可以安裝不同的屬性來創建一些代碼檔，如：變數定義的檔、顏色相關的檔、字體相關的檔等。
Sass 導入檔
類似 CSS，Sass 支持 @import 指令。
@import 指令可以讓我們導入其他檔等內容。
CSS @import 指令在每次調用時，都會創建一個額外的 HTTP 請求。但，Sass @import 指令將檔包含在 CSS 中，不需要額外的 HTTP 請求。
Sass @import 指令語法如下：
@import filename;
注意：包含檔時不需要指定檔尾碼，Sass 會自動添加尾碼 .scss。
此外，你也可以導入 CSS 檔。
導入後我們就可以在主文件中使用導入檔等變數。
以下實例，導入 variables.scss、colors.scss 和 reset.scss 檔。
Sass 代碼：
@import "variables";
@import "colors";
@import "reset";
@import "colors";
@import "reset";
接下來我們創建一個 reset.scss 檔：
reset.scss 檔代碼：
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body,
ul,
ol {
margin: 0;
padding: 0;
}
然後我們在 standard.scss 檔中使用 @import 指令導入 reset.scss 檔：
standard.scss 檔代碼：
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
將以上代碼轉換為 CSS 代碼，如下所示：
Css 代碼：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass Partials
如果你不希望將一個 Sass 的代碼檔編譯到一個 CSS 檔，你可以在檔案名的開頭添加一個下劃線。這將告訴 Sass 不要將其編譯到 CSS 檔。
但是，在導入語句中我們不需要添加下劃線。
Sass Partials 語法格式：
_filename;
以下實例創建一個 _colors.scss 的檔，但是不會編譯成 _colors.css 檔：
_colors.scss 檔代碼：
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
如果要導入該檔，則不需要使用下劃線：
實例
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
注意：請不要將帶下劃線與不帶下劃線的同名檔放置在同一個目錄下，比如，_colors.scss 和 colors.scss 不能同時存在於同一個目錄下，否則帶下劃線的檔將會被忽略。