Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
# | Oct 8 2018

[環境起手式] 手指按兩下自動幫你 Compile scss & Live reload

本文適合給初學者跟懶惰者看(VSC 限定),就算你不會 npm , webkit, gulp 一樣沒問題,手指頭一動就可以寫 scss 囉
只要安裝下列兩個 extension,安裝完重新開啟 VSC 就好囉
1. Live Sass Compiler
2. Live Server


Live Sass Compiler

他會監聽你的網頁,只要有修改就會自動幫你 refresh ~~ 不用再安裝其他東西達到這個效果.

Live Server

幫你在本機跑 server, 讓你只要一更新 sass/scss 畫面也一起更新,再也不用按重新整理了

馬上來實做

安裝完之後,只要按最下面兩個地方 Watch Sass, Go Live (html/htm) 就搞定

左邊是我一開始簡單結構,右邊則是按了 Watch Sass 會幫你自動 compile

下圖可以看到 VSC 的變化,1 就是你會發現 css 跟著 sass 改變而變動, 2 會告訴你成功監聽 watching sass 與 live server 了

按了 Go Live 會跳出一個新視窗,這就是你的 html 畫面啦!只要改了東西 html/css/js 就會幫你自動更新畫面 ~~

這是我現在遇到最快可以開始一個 sass 又簡單的方法,覺得非常適合單純的專案!