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 在哪裡,否則若切割的數量較多,真的會找死自己。

0%