Day 90

Day 90 (Week13), 2021/07/10 (Saturday)

學習時數：6 hr

Done

• hw1 陽春部落格 SCSS 改寫

To Do @ this week

• hw1 陽春部落格
• hw2 留言版 plugin
• hw3 改寫第八週 Twitch 作業

學習心得紀錄

Objective 客觀

一開始想說改寫 CSS 應該滿迅速的，覺得可以半天就解決，後來弄了一整天，因為後來還查了一些資料，例如 Sass 的資料夾結構、字型等等的變數命名、mixin 與 extend 的使用方法，後來還更改了一下 CSS 的 class 命名。

一開始將 CSS 結構化還滿順利的，後來想嘗試看看利用 mixin、extend 把相似語法包起來。如：圖片在 div 背景的設置，原本 CSS 裡面的 icon 是用 div 寫的，然後將 icon 設成背景：

.icon-twitter {
    background: url(./resources/right-arrow.svg) center/cover no-repeat;
}

一次在背景裡包含了很多資訊，如：圖片路徑（url）、不重複（no-repeat）、位置（position: cover），還在思考要怎麼拆掉，或是在句子裡插入變數，所以比較需要煩惱的是路徑問題，路徑可以拆成資料夾路徑及檔案名稱，可是設立變數的話，型態有可能是字串，那要怎麼把這兩個串起來放在 url(./resources/xxx.svg) 呢？後來我自己嘗試利用查到的 #{file-path} 用在 url 內，但是 compile 沒有出錯，但圖片顯示不出來是一片空白，不想死心，因為在按鈕的功能上用了滿多 icon 的圖片，轉查其他人的 code 範例，最後讓我看到了：

@mixin background-image($path--rel,$img) {
    background-image: url('#{$path--rel}/#{$img}');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

我就發現：咦！我都忘記其實　background 是由不同的 attribute 設置的，只是因為方便設定 CSS 的背景樣式都把他塞在同一行，然後這個檔案路徑是參考 stackoverflow 裡面的解答。
改了許久，我後來也在想，這樣將很多 icon 的資料夾路徑設成變數，然後將 icon 的圖片設置成 mixin，真的有比較好管理維護嗎？不過我想如果是要更改圖片路徑的話是滿方便的，檔案就不確定了，因為這個 mixin 的寫法是個別輸入檔案名稱的參數。

第二個修改比較久的部分是色號變數及相似的 class 樣式。
先前在 [FE201] minw 助教的補充有提到變數的命名可以是功能取向、顏色可以是色號，例如 red-01，所以就將字型樣式、字型大小做了功能取向的命名，顏色就是很直白的命名：深中淺色的粉紅色。
相似的 class 樣式，真的是花了一點時間在修改，因為做的過程中，我發現了自己一些不太好的 CSS 設置方法，就是 icon 先統一設置一個格式，如長寬皆為 40px，如果有例外的按鈕要做，就覆蓋先前統一的格式，把長寬覆蓋為 40px，然後在我打包的時候悲劇就發生了，CSS 是根據讀取的行數先後來覆蓋前面的樣式設置，所以打包的順序亂了之後，我的部落格就跑版了，這樣重複跑版好幾次，才漸漸發現原來有這個問題所在，難怪之前在看課程影片的時候，都不會這樣覆蓋。

第三個遇到的麻煩就是 class 命名沒有命名好，當初將部落格首頁與登入頁面的 css 分開，因為共通性不大，就只有登入的按鈕與首頁的按鈕格式相似，所以我的登入頁面按鈕命名是從首頁複製過來的，這時兩個檔案分開，都還沒有悲劇造成。當我想要把兩個檔案合在一起的時候，麻煩就來了，我已經不記得先前 class 命名在哪一個元素內，我就需要一個一個去尋找，然後對照一下，這好像也顯示出對於 class 的命名還不夠明確，自己命名的 class，過了一陣子自己再翻出來看，還是需要一段時間去理解跟查找，所以也花了一段時間更改 class 命名，將 CSS 整合到一起。

感受

看起來 Sass 份量頗輕，實際上做起來，發現滿多眉角需要去注意，例如怎麼去細分 Sass 資料夾結構，因為這個陽春部落格算是小型的專案，所以不需要分到太細，只需要幾個檔案即可，例如 _component.scss、_layout.scss、_base.scss 等等，一開始還以為很簡單，後面才發現要分類前還要先理解一下這些檔案通常都是打包哪些 CSS 部分，然後需要打包成幾個檔案，還要確認有沒有打錯字跑版。原本想說 mixin 跟 extend 用起來會很迅速上手，後來還是查了一下資料，像是 mixin 怎麼設定圖片背景，然後 extend 與 mixin 的差別不是表面上的區別：

/* extend 編譯成 CSS */
.icon-edit, .icon-delete {
 }

/* mixin 編譯成 CSS */
.icon-edit {

}

.icon-delete {
 }

Decisional 決定行動

今天幾番周折，終於完成了陽春部落格改寫，明天要來研究一下複雜的 promise 跟神奇的 fetch，希望還可以碰到一些作業二的內容。