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

學習時數:6 hr

Done

  • hw1 陽春部落格 SCSS 改寫

To Do @ this week

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

學習心得紀錄

Objective 客觀

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

一開始將 CSS 結構化還滿順利的,後來想嘗試看看利用 mixinextend 把相似語法包起來。如:圖片在 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 部分,然後需要打包成幾個檔案,還要確認有沒有打錯字跑版。原本想說 mixinextend 用起來會很迅速上手,後來還是查了一下資料,像是 mixin 怎麼設定圖片背景,然後 extendmixin 的差別不是表面上的區別:

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

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

}

.icon-delete {
 }

Decisional 決定行動

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

#SASS #css #html







你可能感興趣的文章

智能合約(一) - 什麼是智能合約?

智能合約(一) - 什麼是智能合約?

JS102 如何輸出和使用模組?

JS102 如何輸出和使用模組?

C & JAVA-基本概念與差異 (整理中)

C & JAVA-基本概念與差異 (整理中)






留言討論