# 前端學習筆記 第四週進度
###### tags: `大專院校前端體驗營 2021 夏季` `六角學院` `心得日記`

## 第四週

### 學習心得、重點

#### 心得
> 這週配合六角筆記王跟js活動，雖然說超負荷，但是好好的把進度跑完，
>整個體驗營最認真就第一週跟第四週吧~
>中間兩週頗怠惰的，因為擔心而遲遲香水電商下不了手，
>其實了解洧杰老師說的輸出比輸入重要~~(應該吧?怕記錯XD)~~，
>中間兩週，大部分時間都在輸入，也就是看影片，
>除此之外，因疫情一堆活動可以上線參加，所以打亂了不少時間跟精力，
>只能靠練習英打5次去維持我的專注度，就是讓我感覺自己有做點事，
>但結論就是大Boss網頁交不出來，這讓我覺得可惜，沒有利用資源去進步。

>好啦~前面負面宣言結束，今天7/29，專注度蠻集中，
>雖然下午1點才起床，但是比起第一週強迫早9起床報到的精神跟作業完成度，
>高上很多，今天我要開始製作第二週RWD香水電商了，
>即使最後結果不完美，也沒關係，拚一次機會好好把握~不要後悔，加油!!!

>完成一半header+banner，拼拼貼貼，邊參考邊學習，希望明天PC進度結束。

>今天7/30，繼續拚香水電商，已經將content的部分完成，晚點繼續，後續把PC版處理完成，剩下斷點設定。

#### 重點
1.
2.

---
### 7/26(一)

#### 任務清單:
1. slack報到
2. 每周一直播上課
3. emmet英打5次
4. 觀看teachable影片([Sass import - 切分檔案好工具，維護管理更方便](https://courses.hexschool.com/courses/202011121/lectures/33239325))
5. [每日任務](/A29ctomUQymwxIxBwk2hPA?view)

##### Sass import - 切分檔案好工具，維護管理更方便:
1. import - 要將 Sass 學得淋漓盡致，你不能不會 import

@import "";  /*匯入*/

@import "_variable.scss";
@import "variable";       /*可以去除掉副檔名及下底線*/

> 將多個Scss整理並放在all.scss中`@import`，最後自動彙整出css檔
> 讓結構更乾淨
2. import + 變數雙向管理

@import "variable";  /* 將變數額外抽離做管理 */

3. 主要 CSS 拆開管理

@import "main";  /* 將原先all.scss檔案變成main.scss */

> 最後all.scss全部都會插入`@import`，好處在方便去做管理或客製化插件
4. 常見問題解析
5. CSS Reset - 你知道 meyerweb 與 Normalize 的差異嗎？
6. 整合 Reset 流程
7. import 總結

>錄gif

---

### 7/27(二)

---
### 7/28(三)

#### 任務清單:
1. slack報到
2. emmet英打5次
3. 觀看teachable影片([Sass/CSS 設計模式 - 教您最實用的網頁收納術！](https://courses.hexschool.com/courses/202011121/lectures/33239313))
4. [每日任務](https://hackmd.io/yJCwLPRQTve70RQD-Yy8ow)
5.

##### Sass/CSS 設計模式 - 教您最實用的網頁收納術！:
1. OOCSS - 讓結構更加乾淨
###### OOCSS
* **結構**與**樣式** 分離
* **容器**與**內容** 分離

###### 情境:

> 老師當時在公司必須做出5000頁客製化網頁，帶著5位實習生，
> 當時實習生並沒有基礎html、css概念，所以老師做了一件事，
> 學生寫html並用class套css樣式，而老師只要寫css樣式，讓學生套好。

老師:

/* 顏色 */
.red{
    color:red !important;
}
.blue{
    color:blue;
}
/* margin-top */
.mt5{
    margin-top:5px;
}
.mt10{
    margin-top:10px;
}
/* 文字靠右 */
.text-right{
    text-align:right;
}

* [!important](https://www.w3schools.com/css/css_important.asp) 是 **優先權重最高**

學生:

<h1 class="red mt10 text-right">1234</h1>

> 最後老師用excel跟學生說，每一個css樣式代表的意思，讓學生自行運用。
> 結果後面html裏頭好多個class

>利用這個方式就可以組合出他要的樣式，也是OOCSS其中一個精神。
>隨時可以套用樣式，且不會衝突，隨時可以組合樣式

###### SMACSS
* btn(結構 基礎css)
* btn-primary(樣式)

=========================================================
2. OOCSS - 容器與內容分離

:x:

<style>
    .header a{width: 50px; height: 50px;}
    .footer a{width: 50px; height: 50px;}
    .content a{width: 50px; height: 50px;}
    
    <!-- 被div範圍侷限住了 -->
    .header a,.footer a{width: 50px; height: 50px;}
</style>

<div class="header">
<a href=""></a>
</div>

<div class="footer">
<a href=""></a>
</div>

:heavy_check_mark:

        <!-- 獨立按鈕或內容，用成一個工具名稱btn，在去寫相對的語法 -->
<style>
    .btn{width: 50px; height: 50px;}
    .header{}
    .footer{}
</style>

<div class="header">
<a href="" class="btn"></a>
</div>

<div class="footer">
<a href="" class="btn"></a>
</div>

>
>假設我們有一堆容器(container)

>
>加上內容後

:::success
<font color="#EA0000">:warning:**重點**</font>
**內容、元件** 要跟 **容器** 分開
才好去做**管理或額外搬動**
:::

=========================================================

3. OOCSS - 容器與內容分離 - 以格線系統設計為例
###### 範例: 格線系統 grid system
[老派的格線系統 960.gs](https://960.gs/)
[960格線系統 **演示**](https://960.gs/demo.html)

>
>12列網格

>
>16列網格

>
>在html的12、16列網格

>
>格線系統的運作方式
>**60px** (grid_1)+**860px** (grid_11)
>+**10px** (margin-left 10px)+**10px** (margin-right 10px)
>=**960px** (grid_12)

![Uploading file..._53q7owr5q]()

/* 若沒有使用格線系統，可能會多寫300程式碼，w、h這些毫無邏輯的寬高 */
/* OOCSS 讓容器專門去處理容器的問題 */
/* 分頁、按鈕、表單，這些元件就獨立出來處理 */
/* 減少很多客製化的CSS */
.container_12 .grid_1{
    width: 60px;
}

.container_12 .grid_2{
    width: 120px;
}

.btn{
    background: #000;
    color: #fff;
}

.table{
/*  結構   */
}

table td{
/*  樣式   */
}

=========================================================
4. OOCSS - 樣式與結構分離

原先:

<div class=header> </div>

.header{
    /*   結構   */
    width: 200px;
    height: 100px;
    /*   樣式   */
    box-shadow: 10px 10px 10px #000;
}

**樣式**與**結構**分離:

<div class=header header-shadow clearfix> </div>
<div class=content></div>
<div class=footer clearfix></div>

.header{
    /*   結構   */
    width: 200px;
    height: 100px;
    margin-top: 0 auto;
}
.header-shadow{
    box-shadow: 10px 10px 10px #000;
}
.clearfix{
    overflow: hidden;
}

:::success
<font color="#EA0000">:warning:**重點**</font>
好處在 **樣式** 跟 **地基(w200、h100、mt0:a)分離** 好管理
常用在 **清除**、**樣式**
:::
* btn 結構
* btn-primary 樣式(背景顏色)
* btn-lg 樣式(文字變大、按鈕變大)

OOCSS=>精神存在，前面設計模式參考
1. 容器與內容
2. 內容(結構(w、h、m、p) 與樣式)

::: warning
[QA about 每日任務](https://hackmd.io/@hexschool/HyyzZleTu)
Q:老師助教同學們好，這是我的[Codepen](https://codepen.io/chiaoshin/pen/ExmEgjX)，在7/28昨日每日任務裡頭，關於OOCSS樣式與結構分離中，一開始把border分為樣式，因為他可以放顏色在裏頭，但是解答卻是在結構，想問有什麼常見的方式，去區分結構跟樣式?是不是只要是顏色就是樣式? 麻煩助教了，感謝。

A:
[bootstrap](https://bootstrap5.hexschool.com/docs/5.0/components/alerts/)
:::

---
### 7/29(四)

#### 任務清單:
1. slack報到
2. [每日任務](https://hackmd.io/4bKlfWkLT9OTFkppG1aoyw?view)
3. emmet英打5次
4. 觀看teachable影片([掌握 Mixin 後，寫 RWD 再也不是痛苦事](https://courses.hexschool.com/courses/202011121/lectures/33239317))
5. 問7/28每日任務問題
6. 香水電商卡關中

##### 熟悉 Mixin 後，搭配 RWD 宛如天衣無縫
1. 掌握 Mixin 後，寫 RWD 再也不是痛苦事

:x:原先設斷點:

.header{
    font-size: 15px;
}

@media(max-width: 768px){
    .header{
        font-size: 15px;
    }
}

// 缺點一，過多@media 
.content{
    font-size: 15px;
}

@media(max-width: 768px){
    .content{
        font-size: 15px;
    }
}

.header{
    font-size: 15px;
}

.content{
    font-size: 15px;
}

//缺點二，上面過多數據，可能導致編譯費時，需要下拉至好幾百行才能到斷點
@media(max-width: 768px){
    .header{
        font-size: 15px;
    }
    .content{
        font-size: 15px;
    }
}

**:heavy_check_mark:最好的設斷點管理方式**:
* @Mixin+@include (像函式、副程式用法)

//好處在可讀性變高了
.header{
    font-size: 20px;
    
    @include pad{
        font-size: 15px;
    }
    
     @include mobile{
        font-size: 13px;
    }
}

.content{
    width: 300px;

     @include mobile{
       font-size: 20px;
       width: 200px;
    }
}

=========================================================
2. 核心語法 @Mixin + content

>首先，就像副程式， `@mixin` 連動 `@include`，
>將 `@mixin pad` 的內容搬移到 `include pad` ，`pad`為變數

.header{                    //可以看下方SCSS程式碼比對
    width: 500px;           //(此內容不是正確SCSS，單純比對方便)
    
    @media(max-width:768px){
        width:100px;    
    }
}

**程式碼範例:**

//SCSS                                  //CSS
@mixin pad{                             .header{
    @media (max-width: 768px){             width: 500px;
        width: 100px;                   }
    }
}                                       @media(max-width:768px){
                                          .header{
.header{                                       width: 100px;
    width: 500px; //原先.header的寬度       }
                                        }
    @include pad;
}

**最後結果:**

//SCSS部分
@mixin pad {
  @media (max-width: 768px) {
    @content
  }
}
// 因為不可能@media只有單一設定，所以用一個@content

.header {
  width: 500px;

  @include pad{    //之後只要改變這裡，就能產生pad斷點設計
    width: 13px;
    font-size: 20px;
  };
}

//CSS最後編譯模樣
.header {
  width: 500px;
}
@media (max-width: 768px) {
  .header {
    width: 13px;
    font-size: 20px;
  }
}

[**手機mobile+平板pad斷點設計**](https://codepen.io/chiaoshin/pen/PomRBxd)

//SCSS部分(副程式、函式部分)
@mixin pad {
  @media (max-width: 768px) {
    @content
  }
}

@mixin mobile {
  @media (max-width: 568px) {
    @content
  }
}
//////////////////////////////////////////

.header {
  width: 500px;

  @include pad{    //之後只要改變這裡，就能產生pad斷點設計
    width: 13px;
    font-size: 20px;
  };
  
  @include mobile{  //之後只要改變這裡，就能產生mobile斷點設計
    font-size: 8px;
  }

  a{
      background:#FFF;
      @include mobile{
          background:#000;
      }
  }
}

:::success
好處在，不用寫一堆@media，讓程式碼更易讀。
:::
=========================================================
3. [Sass 響應式網頁心得總結](https://courses.hexschool.com/courses/202011121/lectures/33239319)
>**Mixin.scss**專門 **放** 所有 **@mixin效果(包含斷點)**
(在複習一次)

---