---
# System prepended metadata

title: 學習Sass#2 import
tags: [Sass]

---

# 學習Sass#2 import
###### tags: `Sass`

## import 

雖然 Sass 可以加速撰寫 CSS 的速度，但是如果網頁需要加上的屬性很多的話，勢必就會寫得很長很長，對管理或修改上都相對不容易

#### 我們可以將撰寫的 scss 分配在不同檔案，再利用 import 的方式來集中作編譯，這樣一來管理上就會相對容易，程式碼也不會過長

## 檔名

### _檔名.scss

#### 檔名一定要加上 ` _ ` ， ` _ ` 代表他並不會被匯出成 css 檔案

## 匯入

```=scss
@import "檔案名稱";  

// 不用加 "_"
// 不用加上 .scss
```
#### 可以多筆匯入，匯入的檔案間變數是共通的
#### 跟匯入套件一樣，如果匯入順序有差，如果 A.scss 檔案需要用到 B.scss 檔案的變數， B 檔案需要比 A 檔案還要早匯入


## 範例
![](https://i.imgur.com/euuU9j3.png)

### 在一個 scss 檔案再匯入 _variable.scss 跟 _main.scss
如果 main 需要用到 variable 檔案中的變數時， variable 檔案需要先 import 再換 main 檔案 import