第13組 第八週｜CSS 模組化管理
===

###### tags: `小組任務` `第八週` `2021夏季切版班` `team13`
[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)

:::info
- **開會地點：** meet
- **開會時間：** 8/22(日) 20:00
- **討論目錄：**[**第八週任務**](https://hackmd.io/@hexschool/S1zheUogK) `1hr30min`
- [x] 討論（截圖）
- [x] 公布下週沒開會（？）
- **參與成員**：Ian, Jiang V, Min Chun Tsai, Shani, Summer.H, Sz, Xing, 家齊
- 未參加成員：mansonivan, 巫樾, 家齊
- 直播內容
- [第八週直播講義](https://hackmd.io/@hexschool/Hky7SSslY)

:::

---

## 任務一
互相感謝這八週您的組員的相互協助，分享組員或自己想要達到幾 % 完成率？
最後衝刺繼續加油！
### 回答區

>>感謝十三組強大的組長和組員每一次開會都在凱瑞我，我真的超混的，每次組長和組員都會在開會的時候分享每週版型應該要怎麼寫，分享各種卡關的部分，希望可以做到80%！
>>[name=Summer.H 分享][color=#F5697A]
>
>>感謝大家都比我拼，我後面超混的，我反省XDDDDD
>>心得牆我再寫多一點XDD接下來就是死線衝刺拉！
>>至少80%!!
>>[name=Sz 分享][color=#BB84F5]
>
>>Ya爽分到第13組，謝謝組長和各組員的幫忙~每周日與你們相見很開心:>期待大家拿著六角pin出來吃飯押!目標 90%..吧
>>[name=Shani 分享][color=#FFCE6B]
>
>>2021 年夏季切版 13 組真 ~ 的 ~ 很 ~ 棒 ~ 能在這樣的學習環境與大家一起努力完成每週任務，真的很有成就感，也這樣一起走到第八週了，每週最歡樂的時光就是每周日在線上與大家相會討論進度講幹話的時光，尤其感謝 Sz 從程式體驗營開始就超級無敵 carry 大家，還有 Summer.H 每天要通勤三小時的心靈雞湯始終激勵著我，全職學習待在家的我還有什麼理由不努力呢，還有 Xing 也是從程式體驗營就一起走到現在，也是手刻派的超級拼命三郎，趕緊把傷養好啊 !!! 還有馬西、小蔡、月亮 ... 其他組員們每周提供的學習資源，感謝大家的養分，吸收不完 !!!!! 準備開始第八週，要拼 100% ，期待再相逢 ~ 有點小感傷，八週竟然就這樣結束了 ...
>>[name=Jiang V 分享][color=#A7E683]

>>感謝超強大的組長和組員們一路扶持~ 在滿滿的知識點和歡樂又充實的小組開會下眨眼就第八週了，期待徽章相認再一起互相砥礪甘苦談~
>>努力90% GO GO !!
>>[name=Min Chun Tsai 分享][color=#efc267]
>
>>很開心能跟大家分在同一組 每次都是靠大家的分享長知識
>>雖然後期都在邊逃避邊做
>>希望可以做到80% 最後衝刺大家加油
>>偷偷許願希望六角出貼紙 想貼筆電 方便認親
>>[name=Ian 分享][color=#37E4FF]
>
>>很感動能夠有這樣的組員可以一起奮鬥，讓我在家就>>好像不孤單的感覺。真的很喜歡組長那麼無私的分享他的筆記。還有jiang的打氣加油，summer的加油也是！！
>>到了最後兩週的時間，竟然遇到了以前報名的職訓局拖了四個月開的班竟然開成了，於是開始了兩頭燒的工作，讓我現在分身不暇，目前50%.希望可以努力達到70％。
>>很珍惜能夠跟你們當成朋友，能當同學一場！！！希望你們能夠在台灣發光發熱，在職場上散發出耀眼的光芒。祝福你們我的同學我的組員。
>>[name=yella moon 分享][color=#37E4FF]

## 任務二
請每個小組討論成員，挑選其中此[連結](https://www.notion.so/Sass-17a0ac1fc2bb450bb31e27c3a35ad6e0)的 SCSS 結構來進行討論其優缺點
### 回答區
#### [整個github直接先加書籤的chiayutsai學姊](https://github.com/chiayutsai/perfume/tree/main/app/assets/style)
helpers好美，background, sizing, hover獨立出來超讚
頁面上偶爾會遇到這些有特定高寬設定、互動效果的物件
不獨立寫css不行，但直接寫在pages/裡面的話會很冗，找尋上也會很繁瑣
#### [Terry Yu](https://www.notion.so/Terry-Yu-854448facfac4b33938bad2a7df56b0d)
`utilities/_layout.scss`的部份有些感覺可以拆到base，一些留在layout
#### [品君](https://github.com/jiingler/hex-weekly-project-6/tree/master/app/assets/style)
`content/`內裡面有一個 component 資料夾，感覺可以跟外層的 component 做整合

## 任務三：討論第八週版型該怎麼做
### 回答區
<!-- #### [描述型列表對齊](https://bootstrap5.hexschool.com/docs/5.0/content/typography/#description-list-alignment)
 -->

#### [postion > 元素置中](https://bootstrap5.hexschool.com/docs/5.0/utilities/position/)
position 帶入 transform 的樣式，讓標籤可以以中心點置中在想要的 position 上
#### [手風琴](https://bootstrap5.hexschool.com/docs/5.0/components/accordion/)
#### [nav](https://bootstrap5.hexschool.com/docs/5.0/components/navs-tabs/#tabs)
點卡片切換下方內容的部份，會有 nav and tab 效果
#### [連結延伸](https://bootstrap5.hexschool.com/docs/5.0/helpers/stretched-link/)
有很多卡片連結的部份可以用這功能


## 記不起來但是其實開始寫scss 後就很少用到的 class selector
### 階層選擇器
* .container>p 選.container裡「第一層」的p
* .container p 選.container裡「所有的」的p （空格很重要）
* .title+p 選「緊接在」.title後的「第一個」p（可能用在設計副標題）
* .title,p 選.title跟p
---

## 討論截圖