iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0
自我挑戰組

sass&css 30天學習日誌系列 第 16

SASS : VSCode 套件安裝

之前有寫過使用「prepros」學習SASS
https://ithelp.ithome.com.tw/articles/10193263

事實上諸如大部分的線上工具如Codepen、JSBin也支援SASS寫法,不一定要在本地端才能撰寫,只是css會很雜亂,所以只適合小型專案或是測試網頁

https://ithelp.ithome.com.tw/upload/images/20200411/20107321WuIS4q7BII.png

https://ithelp.ithome.com.tw/upload/images/20200411/201073218FIB8DYqJg.png

安裝Live Sass Compiler

另外微軟所出的Visual Studio Code,外掛中也有SASS編譯工具,叫做Live Sass Compiler,
他和另一個Live Server 可互相搭配,是很好用的工具,而且都是同一個開發者

使用VSCode套件時,要確認電腦是否有裝node.js

https://nodejs.org/en/

下載選用Recommended推薦版本會比較穩定

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ip7OqQTPeU.png

要查詢版本就在命令提示字元 輸入

node --version

下方就出現版本資訊

https://ithelp.ithome.com.tw/upload/images/20200411/20107321wRHoxgo8lp.png

VSCode套件安裝方法就是在左邊的擴充功能輸入關鍵字 「live sass」就能找到這兩個工具
按下旁邊的安裝就可以了

https://ithelp.ithome.com.tw/upload/images/20200411/20107321lxyfaOGoaG.png

然後安裝的外掛,按下重新載入就可使用了,在此安裝Live Sass CompilerLive Server

https://ithelp.ithome.com.tw/upload/images/20200411/20107321tFNeqQh4Pk.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321u0SzoLX9BX.png

Live Server 功能

使用虛擬路由執行網頁,存檔時候,會自動在瀏覽器新開網頁,顯示最新存檔後的畫面

使用方法:

在網頁隨意輸入內容,看到下方有個Go Live的圖,點擊就可打開,小圖會變成port:5500表示他網址是http://127.0.0.1:5500/

https://ithelp.ithome.com.tw/upload/images/20200411/201073215EDCCwhUhP.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321wSAKzGi2LC.png

網頁會自動跳出,如下圖

https://ithelp.ithome.com.tw/upload/images/20200411/20107321XVHyIf2peZ.png

設定css 輸出

接著要設定css 輸出的資料夾,在檔案<喜好設定<設定

https://ithelp.ithome.com.tw/upload/images/20200411/20107321RvuJtWMFy5.png

在最右邊有個「…」,點下會出現兩個選項,選擇Open settings.json

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ccrSA1JfkF.png

打開可看到右方有「使用者設定」和「工作區設定」,這兩個差異在外掛設定是套用在全部專案中還是部分專案,如下圖
「使用者設定」: 全部專案
電腦中所有專案都套用此外掛設定,設置參數放下方圈選的大括弧內

https://ithelp.ithome.com.tw/upload/images/20200411/20107321IKegrbVLps.png

「工作區設定」: 部分專案
指定在這開啟的專案中套用,使用時會多一個.vscode資料夾,設置參數放工作區設定的大括弧內,參數都儲存在.vscode資料夾內的settings.json檔案

https://ithelp.ithome.com.tw/upload/images/20200411/201073215XuuIjYjhG.png

在此範例選擇「使用者設定」,並且把外掛編輯內容放在大括號內(使用者設定圖中紅色圈選處)
更多說明可參照
用戶和工作區設置(User and Workspace Settings)
http://bit.ly/2PN25yc

設定Live Sass Compiler css路徑

不論是在「使用者設定」和「工作區設定」,把下面這段貼到大括號內,裡面功能如下:

1. 加上前綴(Prefix)

2. css輸出設定,如字尾名、路徑..

      //css產出設定
      "liveSassCompile.settings.formats": [
        {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "./css" //此為輸出的路徑,可以自行更改
        },
        {
          "extensionName": ".min.css", //正式版副檔名為min.css
          "format": "compressed", //壓縮成一行css,正式版本
          "savePath": "/dist/style"
        }
      ],
      "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
      //generateMap:SASS跟CSS做對應行數
      "liveSassCompile.settings.generateMap": true,
      //autoprefix設定
      //這項套件會自動幫你加入前綴(Prefix)
      //例如:-webkit- -moz- ...等
      "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]

更多設定內容可參考
ERAY NOTE:編譯SASS/SCSS方式
http://bit.ly/2PHvPMK

ALEX宅幹嘛 : 從 CSS 到 SASS (SCSS) 超入門觀念引導
VSCode使用者設定:
https://slides.com/alexchen-4/deck#/0/17
影片內容:
https://youtu.be/mzuKtTuimEE?t=2753

使用SASS

新增HTML、SCSS資料夾裡面包含SCSS檔案
並且寫內容在裡面

https://ithelp.ithome.com.tw/upload/images/20200411/201073211XzWwh1UEZ.png

在VSCode下方有個 Watch Sass,點選就能開啟SASS監聽

https://ithelp.ithome.com.tw/upload/images/20200411/20107321jiMSf15URl.png

打開時,會瞬間新增CSS和dist資料夾,裡面有CSS檔案,這個就是SASS編譯後的CSS

css資料夾的css為未壓縮版本,為開發版本的檔案
dist資料夾的css皆被壓縮成一行,為正式版的檔案

而下方會跑出終端機視窗,當SCSS檔案有編譯時候,他就會跑出訊息出來

重點: 儲存的時候,他只會編譯【當下這支】scss,
如果目前在navbar.scss儲存,並不會同時更新all.scss。

https://ithelp.ithome.com.tw/upload/images/20200411/20107321pIBuCaQs7O.png

Watch Sass的圖示也會出現Watching的字樣,終端機顯示目前是Live Sass Compile在執行

https://ithelp.ithome.com.tw/upload/images/20200411/20107321S08gjF7jQu.png

這樣就可以順利在VSCode運行Sass的環境了!!


上一篇
CSS: 陰影原理應用
下一篇
SASS&CSS : 程式註解、大於符號、inline-block
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言