vscode – 薯薯推薦 https:// 票券優惠、排行比價 Thu, 19 May 2022 03:44:13 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.5 https://i0.wp.com//wp-content/uploads/2022/01/cropped-LOGO_工作區域-1-1.png?fit=32%2C32&ssl=1 vscode – 薯薯推薦 https:// 32 32 187861033 如何使用 VS Code 插件 Live Sass Compiler 自動編譯SCSS?圖解一看就懂! https:///scss-live-sass-compiler/ Sat, 30 Oct 2021 00:30:00 +0000 https:///?p=1839 這篇要來教你VS Code 插件 Live Sass Compiler 來快速將 SCSS 轉換成 CSS 檔!

會以 SCSS 為主而非 SASS 原因是個人習慣看有大括號的樣式檔,因此雖然安裝插件和設定檔不分 SASS 或 SCSS ,但本篇介紹文內容會以 SCSS 為主噢!

熟悉 CSS 之後為什麼會想學預處理器 SCSS 呢?主要是考慮到如何在主管或客戶要求:「做另一個版本把藍色主色換成綠色、圓角少一點、陰影重一點看看!」
遇到這種要求的時候,如果只有純 CSS ,要改的地方可就多了。

預處理器 SCSS 的好處就是這些改檔案的需求可以用變數來處理,雖然預處理器可以寫函數,功能相當強大,但對初學者來說光是學會將顏色、圓角、陰影這些歸納成變數,就已經是網頁設計福音了!

會想撰寫這篇就是因為,我當時光是環境設定和輸出路徑也搞了一陣子@@
讓我手把手帶你設定一遍吧!

建立 SCSS 檔案

首先我們先在建立檔案的地方新增檔案,下圖中是我用xampp所以路徑在xampp下的htdocs,
雖然我建立的是.php檔案,但.html的靜態網站也可以,完全不影響這次教學的插件安裝設定。

然後我們要先建立好scss和css資料夾,我們設定時主要只會用到這2個資料夾來測試有沒有成功設定好路徑噢。

建立基本檔案結構
建立基本檔案結構

接著在scss資料夾中新增一個style.scss檔案

建立scss檔案
建立scss檔案

SCSS 寫入測試用的樣式內容

再來我們可以在scss檔案中寫下簡單的測試樣式:

/* 用$開頭設定scss變數 */
$color: red;

/* 使用scss設定的變數 */
body{
 background: $color;
}

scss好處就是我們可以使用$錢字號來設定變數,測試樣式我們用顏色來當範例。

使用時前面只要前面有加上$就會帶變數進來,這樣要改的時候就只要改變數內容,就可以統一將所有網頁的顏色改變了,超方便的吧!

於 scss 檔案中寫下樣式
於 scss 檔案中寫下樣式

寫好之後就來安裝「 Live Sass Compiler 」插件,讓 VS Code 自己幫你把scss編譯並生成css吧!

安裝 VS Code 插件 Live Sass Compiler

Live Sass Compiler」 這個插件,可以讓你在每次存檔的時候,就自動幫你從scss轉換到css一次,因此第一次轉換後還可以同時開啟scss和轉換好的css檔案,未來還可以即時比對轉換結果

我們到 「 延伸模組 」 > 找「Live Sass Compiler」 > 按下「安裝」按鈕。

Live Sass Compiler 插件
Live Sass Compiler 插件

安裝好之後,再來要進入設定檔案來設定輸出路徑等相關設定囉!

開啟 VS Code 的設定檔案

修改 VS Code 「受限模式」為「信任」

通常想要在 VS Code 開啟設定檔案 settings.json 檔案前,你需要先將左下角的受限模式改成信任,因此我們到左下角點一下「受限模式」開啟模式設定。

受限模式
受限模式

點選「信任」按鈕。

改為信任模式
改為信任模式

再來我們就可以放心去開啟設定檔囉!

開啟 VS Code 設定檔

選擇左上角的「檔案」 > 「喜好設定」 > 「設定」。

開啟設定畫面
開啟設定畫面

開啟後會出現下面這個畫面,我們直接找選單中「延伸模組」 > 「Live Sass Compiler」 > 找到Formats的「在settings.json內編輯」按鈕點下去。

settings.json編輯檔開啟方式
settings.json編輯檔開啟方式

再來就是直接在設定檔中,手動打上你想要設定的內容。

手動設定輸出路徑

點下去後可以打上以下程式碼

"liveSassCompile.settings.formats": [
    
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
]
欲設定的內容程式碼
欲設定的內容程式碼

其中,savePath就是scss自動編譯成css檔案的輸出路徑囉!

當時 savePath 這條設定我搞半天都沒有效,最後是發現前面要多個 ~/ 符號才設定成功,這符號有些是用在「應用程式根目錄」,如果單純的 / 符號是從網站根目錄,不過有些網路範例並沒有寫到 ~/ 符號就能有效果。

補充:
format:指編譯後的 CSS 格式。
expanded 未壓縮
compressed 壓縮
extensionName:指檔案編譯後產生的副檔名。

到這邊基本設定就完成了,開始來測試自動轉換的強大功能吧!

測試將scss轉換成css檔

我們回到scss檔案,右下角因為安裝了 Live Sass Compiler 插件而出現了 Watch Sass 按鈕

如果你的插件才剛安裝好,卻沒有出現這個按鈕時,通常重新啟動 VS Code 就會出現囉。

那我們就按下 Watch Sass 按鈕。

Watch Sass
Watch Sass

緊接著會跳出一塊視窗,顯示「Watching…」,這就表示已經成功啟用插件,並且開始監聽你的程式,只要你在scss檔案中按下存檔,就會自動幫你轉換成css檔案囉!

Watching
Watching

所以這邊我們就按下存檔吧。

存檔後出現下圖畫面,紅色框起來的地方就是轉換成css檔案後存放的位置,也就是我們剛剛設定的輸出路徑

因此我們可以到檔案總管去看看有沒有成功製造出css檔案了。

顯示輸出的css檔案路徑
顯示輸出的css檔案路徑
成功輸出成css檔
成功輸出成css檔

這樣就能看到插件自動幫你生成好css檔案,並放在指定的資料夾中了!

你可以看到除了css檔案外,還有另一個.map檔案,這個檔案只是這個插件生成的路徑檔,不想生成的話只要到settings.json輸入以下語法就可以不生成.map檔了。

"liveSassCompile.settings.generateMap": false
不生成.map檔的程式碼設定
不生成.map檔的程式碼設定

務必記得你在設定檔中,
每一個項目之間要有「,」逗號當作間隔噢!

scss完成轉換後的css檔案呈現

最後就來看看成果吧!

我們把css檔案打開,原本的$color就自動替換成我們設定的顏色囉!

完成編譯後的css檔案內容
完成編譯後的css檔案內容

使用scss新手疑問

這邊多給我們的讀者一個新手容易遇到的小問題,大部分去看介紹文章可以看到許多用法,像是@mixin、@include等引用的基本用法。

這邊要介紹的小技巧是在使用上更基本,但新手容易出錯的用法:#{變數}

我們先把scss和css檔案同時開啟就能比較出問題點:

需使用#{變數}讓變數順利被讀取
需使用#{變數}讓變數順利被讀取

上圖可以發現,$ax-header-h: 66px; 是我原先自訂的一個變數。

當我想要用css的內建運算公式calc()語法,但如果只寫下面這樣:

/* 會轉換失敗的寫法 */

height: calc(100vh - $ax-header-h);

沒有辦法成功被轉換的!

這時候要使用#和{ }把變數包起來,像下面這樣的程式碼寫法:

/* 成功轉換的scss寫法 */

height: calc(100vh - #{$ax-header-h});

就可以順利轉換囉!

總結

以上就是這篇使用 VS CodeLive Sass Compiler 插件,自動編譯 SCSS 成 CSS 檔案,並且把編譯後的檔案放置在你指定的位置中

未來再也不怕主管或客戶突然想更換網頁顏色,否則100個頁面要改上百個顏色真的會頭昏昏腦脹脹,使用 SASS 或 SCSS 預處理器,幫你完成高效率的修改吧!

]]>
1839