SCSS學習-import(四)

前言

SCSS 中有提供一個 @import 功能，如果使用的妥當就可以開發上管理的方便。

前置作業

一般來講使用 SCSS 最大好處就是可以模組化，所謂模組化就是可以將特定區塊的 CSS 切出來，切出來後相對我們在做 CSS 管理及開發上就會比較好維護，否則以往要改一個地方就是上千上百行。

接下來將會使用 VsCode 來做講解。

VsCode

另外會替 VsCode 安裝一個 SASS 編譯插件來做開發，名稱叫 Live Sass Compiler。

安裝完畢後 VsCode 右下方有兩個功能按鈕可使用。

1.Watch Sass 偵測 Sass/SCSS
2.Go live 開啟模擬 server 模式

這個插件的好處是幫助監控 SCSS 資料夾下的檔案，進而編譯成瀏覽器可讀取的 css，也可以幫助將網頁模擬 server。

安裝完畢後，開始撰寫前記得點擊右下角的 【Watch Sass】 按鈕，若有啟動它會呈現如下圖。

開始撰寫

以往撰寫 CSS 的時候都是寫在一個 all.css 或是 style.css 中，所以有可能會有上千上百行，如圖片所示↓

若要調整特定地方的時候就會特別困難，滾輪會滾到爆掉，所以若使用了 SCSS 的 @import 功能，就可以將特定區塊的 CSS 切出來做獨立開發，並搭配變數使用，這樣子就可以增加可維護性唷~(滑鼠滾輪也比較不會壞XD)。

首先先建立幾個SCSS檔案，分別為：all.scss、_layout.scss、_varibale.scss。
_varibale.scss 專門放自訂的變數(字型大小、字體、色票等。)
_layout.scss 網頁主要布局 SCSS
all.scss 則是專門加載 SCSS 近來編譯的的核心檔案，所以大多這邊只會有 @import
最後記得除了 all.scss 之外的檔案，記得檔案名稱前面要加入一個”_“，如果檔名前面有”_“編譯器就不會對那檔案編譯出 css，畢竟只載入 all.css。
p.s 副檔名若改成 sass 就會變成 sass 撰寫模式，這點要注意。

首先先去 _varibale.scss 加入所需要的變數。

然後再 _layout.scss 使用 @import 將 _varibale.scss 引入並填寫剛剛所撰寫的變數來生成一個 box。

@import 的使用可以不用寫入副檔名及_

最後去 all.scss 中將 _layout.scss 引入到 all.scss，此時可以發現資料夾下多了一個 all.css，這個就是透過插件偵測到所自動生成的 all.css。

當然也可以點進去看內容。

發現與剛剛撰寫的 SCSS 內容一樣，但是會發現多一行 map/* sourceMappingURL=all.css.map */。

map (又稱 sourcemap)檔案主要是用來幫助 SCSS 開發者尋找原本的 SCSS 檔案路徑，所以若透過瀏覽器去觀察的話，會發現瀏覽器所顯示的檔案不再是 .css 而是 .scss。

這樣的好處就是方便尋找哪一段的 SCSS 在哪裡，否則若切割的數量較多，真的會找死自己。