iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

菜鳥30日自學SASS及SCSS系列 第 5

【D-5】建立Sass/SCSS編譯環境

  • 分享至 

  • xImage
  •  

附上官網供各位參考
官網:Sass: Syntactically Awesome Style Sheets

新手若是想玩看看SASS也可以先使用線上編輯器哦!
線上編輯器:SassMeister | The Sass Playground!

今天要教大家如何透過 Visual Studio Code 使用SASS語法
記得先去下載 Visual Studio Code

Visual Studio Code

Step 1:在桌面新增資料夾 例:VSCODE

Step 2:開啟Visual Studio Code -> 開啟資料夾VSCODE

Step 3:下載插件Live Sass Complier

Step 4:在資料夾VSCODE中新增檔案,格式為.scss (如寫SASS語法,格式則為.sass)


Step 5:新增檔案home.scss後,開始寫入程式

Step 6:寫入程式後儲存,按右下列最左方鍵 watch sass,點下變 watching sass

Step 7:編譯成功後,右列資料夾VSCODE會多出兩個檔案

Step 8:即可查看編譯好的home.css檔案


上一篇
【D-4】SASS與SCSS 差別?
下一篇
【D-6】 Sass/SCSS 基本語法-變數(1)
系列文
菜鳥30日自學SASS及SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言