SCSS學習-import(四)
前言
SCSS 中有提供一個 @import
功能,如果使用的妥當就可以開發上管理的方便。
前置作業
一般來講使用 SCSS 最大好處就是可以模組化,所謂模組化就是可以將特定區塊的 CSS 切出來,切出來後相對我們在做 CSS 管理及開發上就會比較好維護,否則以往要改一個地方就是上千上百行。
接下來將會使用 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
網頁主要布局 SCSSall.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 在哪裡,否則若切割的數量較多,真的會找死自己。