Frontend Intermediate Course - 作業三

作業 3 的 GitHub 連結：寫 CSS 必備神器：CSS 預處理器

第三個作業原本以為應該不會花很多時間，不過研究如何在 Sublime 上面把 Sass 編譯成 CSS 花了不少時間，還另外寫了一篇：在 Sublime Text 3 將 Sass 編譯成 CSS。

Sass 的基本大致了解，不過還是想要仔細學過一次，剛好 Codecademy 上面有 Sass 的課程：Learn Sass，所以昨天把那門課上完，上完後才知道原來除了可以使用變數、mixin 之外，Sass 還有運算跟函式的功能，以及如何管理 Sass 檔案等等，是不錯的課程，對於 Sass 也有更全面的了解。

寫 Sass 做作業的時間其實不多，大多花在前置作業上面，上次的作業二大致上沒問題，不過還是做了一些修改，主要的修改有：

• 把色塊的 div 拿掉，因為當初是理解錯誤老師的自我練習的問題 XD。
• filter 加在預覽畫面而不是整個方塊上面。因為下方的頭像是淺色，filter 增加亮度後看不清楚，所以只有加在上方的預覽畫面。
• 預覽畫面、頭像、頻道名稱、及實況主名字在 :hover 加入 cursor: pointer。
• 在 Sass 編譯成 CSS 後利用 Sublime 的套件 Autoprefixer 自動加入 prefixes。因為我實在太懶得打 prefix mixin 了 XD。

附上這次作業的 CodePen：

See the Pen HW_3 by Peggy (@pychiang) on CodePen.

以上就是這次簡短的作業筆記，有錯還請指正。