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

可以給點牡蠣。
Google AD