# Titan

- @mixin和寫class差別:@mixin可以寫參數，使用較有靈活度，可參考[Bootstrap使用的＠mixin方式](https://github.com/twbs/bootstrap/tree/main/scss)
- 直接寫tag還是要命名class？差別在靈活性，如果情境是做一頁式網站，不會需要維護或修改的，就不會特別命class name
- ＠use `as *`不建議使用，要查的話會比較方便知道哪一支檔案來的
- 沒有使用＠use載入就不用寫
- class命名統一，我有中線和底線

### all.scss
- 載入檔案的順序，會影響到輸出
- 我的順序:base->utilities->layout->components->vendor，
他會base->utilities->components->vendor->layout
- 哪些是基礎，哪些是客製，vendor原套件做二次客製

### breakpoint.scss
- @mixin的命名:現在mobile/tablet/desktop很多尺寸是重疊的，他偏好＠mixin 名稱用sm md lg，或是寫

@mixin breakpoint(參數){
    if判斷式
}

### flex.scss
- 我有寫flexBox和flexAlign的＠mixin，但有[place-items](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)就可以使用，不用特別寫一包＠mixin
> syntax
> place-items = <'align-items'> <'justify-items'>

### companyInfo.scss
- class about沒用到不用寫
- %ellipsis可以其他地方複用，想想怎麼包
- %moreButton等有寫到extend的，其實直接寫css就好不需要獨立出`%`，因為沒有複用到

### card.scss
- 對於card理解? Bootstrap的card是由`img` `heading` `p`等組成，如果這樣companyInfo裡面也應有三個card
- component資料夾的card.scss可複用嗎？
- class命名注意，如改文案還叫做`.program` `.service`?命名用**抽象命名**，card已經被boostrap用掉就想其他的，四個卡片就能直接套用同一個class name寫法更快，也不需要用@extend或@mixin

//原先寫法
.strategies {
    @include cardSet();
}

.support {
    @include cardSet();
}

.programs {
    @include cardSet();
}

.services {
    @include cardSet();
}

//修改後 共用同一個class
.product-item {
    @include productSet();
}

### swiper.scss
- 巢狀太多層，最多不超過3層

### navbar.scss
- search-icon輸入的字太多會擋住字

### body.scss
- 下min-width:375px，他個人不偏好有捲軸
- 在sm以下把padding拿掉有多一些空間
---

# 季芳
- 1440px以上畫面是壓扁(如下圖)


/*在body下max-width*/
max-width:1440px;
margin:0 auto;

＠use`as *` 不建議使用
@extend: 太遠的不湊在一起，只有一行的也不使用
單位使用rem居多，有特別想法？季芳自己現在都用px

### header
- social-media是重要資訊嗎？還是可改在footer區
- navbar中，有dropdown的nav-item裡面的`a`應改成`button`，思考他是不會轉跳到其他頁面，還是當前頁面

### main
- 專案只有why choose us這區用到fontawesome，只有一個地方用到的話可以下載svg檔方式

### package.json
- 撰寫script腳本，就可以npm run +自訂名稱

### background.scss
- background:url("")記得寫引號，[W3.org說明](https://www.w3.org/TR/css-values-4/#urls)

### carousel.scss
- for迴圈有from 1 through 3，3這個也是會變動的，之後維護要講好，看用JS還是sass的for

### flex.scss
- @mixin flexBox命名會看不出是什麼，需要點進去看才知道

### navbar.scss
- 此部份都沒拆檔都寫一起，而header區的東西都拆？拆檔想法？是否能重複利用

# Chris
- 有屬性在斷點有變化寫一起比較好知道改變了什麼(有前後關係)
- ＠mixin breakpoint寫法修改如下，

$smSize: 576px;
$mdSize: 768px;
$lgSize: 992px;

//原先寫法
@mixin sm {
    @media (min-width:$smSize) {
        @content;
    }
}

@mixin md {
    @media (min-width:$mdSize) {
        @content;
    }
}

@mixin lg {
    @media (min-width:$lgSize) {
        @content;
    }
}


//Chris建議 將上面三個斷點寫成一個＠mixin
@mixin deviceSize ($size){
    @media (min-width:$size){
        @content;
    }
}

- 不要用語法命名mixin，參數太多也不行，就拆多個mixin來處理
- sass是預處理器，這個預是**在compiler編譯器之前**意思
> wiki資料
> 一個現代編譯器的主要工作流程如下：
> 原始碼（source code）→ 預處理器（preprocessor）→ 編譯器（compiler）→ 組譯程式（assembler）→ 目的碼（object code）→ 連結器（linker）→ 執行檔（executables），最後打包好的檔案就可以給電腦去判讀執行了。
- 預處理器主要概念是**字串取代**，用特徵做關鍵字，例如:`%` `&` `$`等符號在做的事情
- extend&mixin差別:

@extend
1.會寫在最上面
2.如果使用`%`會被刪除
3.會群組化

@mixin
1.會在寫include的地方，不會移動

- 不要用 `-g`安裝npm套件(g是安裝全域意思)
- transition 的all可不寫，也可以分開寫屬性的變化，如下

transition: opacity 0.8s 0.3s, transform 0.8s 0.3s;

- 拆檔問題:utilities資料夾要很注意，容易會變成"其他"資料夾，如color.scss他是用來"定義"，則放base資料夾
- framework vs library:
- framework 規定怎麼用就怎麼用
- library 隨你怎麼使用
- sass屬於工具

參考資料:
[wiki-compiler編譯器](https://zh.wikipedia.org/zh-tw/%E7%B7%A8%E8%AD%AF%E5%99%A8)
[wiki-預處理器](https://zh.wikipedia.org/zh-tw/%E9%A0%90%E8%99%95%E7%90%86%E5%99%A8)
[ast compiler抽象語法樹](https://zh.wikipedia.org/zh-tw/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9)