CSS優化項目之一:多語系選單

esther

想記錄一下自己去年優化的幾個部分,不堪回想的血淚… T^T
剛接觸 sass 時,會被他很厲害的功能迷惑,
曾經我也不自覺地濫用了很多的 @extend
但是如果弄清楚需求與效能後,
會知道很多東西其實維持舊寫法才是比較適當的選擇。
就讓我們繼續看下去吧…

Needs?

選單的需求很單純:

  1. 多階層選單
  2. 大項目分類與旗下所有子項目清單
  3. 不同語系會有不同寬度與欄數
  4. 每一列下方會有分隔線

原本(不是我的)做法是各別將語系的寬度與欄數做了兩個 map 以及一個 map-get 的 function,
先以語系的寬度 map 跑 @each 後,再針對語系去 get 該語系欄數的 map,
最後還針對分隔線多了無謂的計算。

寫到這裡應該大概能理解為什麼要優化這塊的CSS了?

2017-09-18