1. 你為何會選擇這個專案？

再 拿到 UI 設計師 的 草稿 圖 時 如何 把 figma 的 檔案 有效 的 整理 好 檔案 並 的 專案 可以 有 的 建構 好 架構。

主要 讓 我們 去 驗收 過去 幾個月 的 學習 成果 ， 學期 三 的 第 一個 作業 ， 就 未 ， 從 HTML 結構 ›SCSS 樣式› Javascript ›本 機 上傳 github› 發佈 ， 都 完全 自己 來。



Alpha_Shop
電 的 購物 網站 _demo muchuanhung.github.io



2.你使用了什麼技術？

  1. 以 SCSS 作為 CSS 之 預 處理器 ， 提升 樣式 設定 效率
  2. 使用 了 Стиль БЭМ 可以 透過 code class 名稱 知道 彼此 之間 上下 的 結構
  3. 使 顏色 參數 變數 化 ， 並 以 тема документа 實現 黑暗 模式 切換

3.哪部分你相對能掌握？哪裡花了最多時間？

因為 Sass mixin 跟 extend 的 函式 ， 可 重複 的 CSS ， 所以 也 花 一些 時間 樣式 ， 來 精簡 程式
HTML 較 無 較多 進行 SCSS 樣式 設定。 由於 需求 有 指定 進行 RWD ， 於 調整 手機 與 網頁 面 大。

4.過程中碰到什麼困難？又如何克服？（例如：查找網路文件）

在 Javascript 的 邏輯 跟 CSS 樣式 的 切換 也 花 了 些 心思 反覆 回去 翻 教案 去 思考 怎樣 延伸 去 應用

5.過程中你有對哪個前端技術有特別深刻的學習？

  • SVG 圖檔 的 填色 切換
  • scss 分類 管理 用 @import 把 一些 預處理 的 scss 樣式 切割成 不同 檔案 讓 主要 的 style.scss 面 簡潔 易讀

消化 之後 關於 svg 的 資料:
https://codepen.io/muchuanhung/pen/mdMXXXy

參考資料

SCSS 深色 模式 ： https://www.tpisoftware.com/tpu/articleDetails/1613