iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
1
自我挑戰組

網頁學習日誌系列 第 20

SASS : 安裝環境和基本操作

安裝:

在此用「prepros」來快速學習SASS,以下是官網載點:
https://prepros.io/downloads

選擇好對應的作業系統下載即可。

另外如果是用sublime等需要另外安裝套件的寫網頁軟體,
就需確認裡面是否有安裝SASS、SCSS套件。

安裝好之後就拖曳網站資料夾到「prepros」,如下圖:

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

拖曳後產生兩個欄位,左邊是網站資料夾,右邊是「檔案清單」、「Log」、「FTP」、「軟體設置」,最重要的就是「Log」,他會顯示SASS紀錄,當SASS無法轉成CSS時,他會有紀錄,方便看程式是否哪邊有問題?

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

而且他會在資料夾產生一個prepros-6.config,如後續沒有要用到SASS,網站完成後可以刪掉,如果要再用SASS輸出成CSS要再重新拖曳檔案到「prepros」讓他讀取該資料夾繼續編譯SASS。

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

基本操作:

之前有提到SASS有兩種寫法,之後範例我會以SCSS為主。

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

圖片來源:六角學院

新增scss和css資料夾:

開始寫SCSS之前,先在網站資料夾新增SCSS和CSS資料夾,SCSS檔案存在同名資料夾,
SCSS檔案儲存時,電腦桌面會出現編譯成功的小視窗,CSS資料夾會出現一個CSS的檔案。

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

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

下圖左邊是SCSS,右邊是編譯好的CSS

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

輸出CSS:

為了以示區別,在header內加上Logo區塊,可看到SCSS 和 CSS檔案的不同:

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

錯誤提醒:

如果寫SCSS過程中有錯誤,「prepros」裡面的Log也會提醒是哪一行程式碼錯誤。

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

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

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


上一篇
SASS : 巢狀結構
下一篇
SASS : 整合重複數值-變數
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言