在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。

文章節錄當時的檢核點，作為日後開發的 check list。

學習

職場產業

一位會切版的 UI 設計師，
以介面設計為錨，朝向 UX 、產品思維、數據思維前進。

喜歡透過書探索世界、看見自己。
著迷文字與內心產生共鳴的瞬間，
喜愛哲學、小說、心理、創造力，
喜愛將所思所想落地變成文字。

為甚麼寫這邊文章?

這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。

這篇文章更偏向純紀錄性質，方便日後有需要時直接複製相同指令來完成 Bootstrap 與 Sass 的引入，也會做成一個專案起手式的模板放在 Github ，未來在建置新專案時可以透過直接複製專案，來省去前面重複的這過程。

使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。

在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事，並且隨著對 Bootstrap 以及 Sass 了解的加深，發現客製化的幅度可以非常的大跟彈性，因此想記錄這些研究與實作的過程，如果對你也有幫助，那就太好了。


我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。

<div class="draft-block draft--p left">你好，文章中的 meyerweb.com 連結沒有連到喔~</div>