系列文章
實戰3：無痕的延伸固定之術
如果使用有限的等比縮放來切版，當畫面超出設計稿時，通常需要思考那些依附於視窗畫面的物件應該放在哪個位置，這篇我將分享一些處理思路～那我們開始吧。 假設灰色部分...
煉金工房的核心設施：認識魔法熔爐 PostCSS
在學會三大公式並開始運用到開發中後，會發現一個大問題：以前屬性值寫 ??px 就搞定了，現在卻要寫一堆字。所以我們需要一種與過去開發體驗類似的方法，否則你無法說...
讓 webpack 老大哥，學會使用 postcss 魔法熔爐
在「煉金工房的核心設施」中，我們體驗了 postcss 的運作過程，不過大部分使用 postcss 的方式都是透過打包工具，打包工具跟 postcss 的流程差...
無需學習的天賦，Vite 與生俱來的 PostCSS 魔法
以前 webpack 運行邏輯是在啟動時將所有文件編譯一遍，導致 webpack 在專案規模大時，啟動時間都超爆久。加上當時原生 ESM 慢慢成熟，vite 就...
煉金術的兩種配方：PostCSS 插件的配置模式
我不段重複 plugins 是 postcss 最重要的設定，並在「無需學習的天賦，Vite 與生俱來的 PostCSS 魔法」提到：plugins 設定接受兩...
點石成金的秘術：正規表示式替換大法
充分理解 postcss 使用方法後，我們就能開始嘗試解決最初的目標：「在 css 屬性值寫函式呼叫，並將函式運算後，用結果替換函式呼叫的字串」。 我們先梳理一...
煉金術的精密儀器： postcss-value-parser
在「點石成金的秘術」中，我們用正規表示式實現了「將 css 屬性值的函式呼叫字串用計算結果替換」的目標，但深入去研磨正規表示式的匹配範圍是相當花心力的，因此這篇...
現成的魔法奇物：postcss-functions
一開始我們在「點石成金的秘術」中，直接寫正規表示式去解析 css 屬性值，以獲取函式呼叫字串，並用函式執行後的結果替換該字串。 後來覺得正規太難了，所以我們在「...
實戰4：揮舞魔法奇物，重鑄 CSS 咒文
我們已經將「用等比縮放達到我心中的 pixel perfect」的設計稿實現了三遍，第一遍是等比縮放，第二遍是有限的等比縮放，第三遍是延伸固定。 這三遍都存在數...
手工刻印的快捷符文：VSCode Snippet
在「實戰4」中，我們完成了用函式替代公式的實作，但在最後留下一個疑問：函式名太長怎辦？身為一個記性差的人，我的解法就是 Snippet。 Snippet 是啥？...