---
# System prepended metadata

title: DD105 Web/APP前端設計工程師養成班
tags: [前端設計工程師養成班]

---

###### tags: `前端設計工程師養成班`
# DD105 Web/APP前端設計工程師養成班
[](https://)
https://github.com/sexfat/git_b/invitations

Git  基本設置
https://app.gitbook.com/@bryant-huang/s/git/git-she-zhi



# html 測驗

https://docs.google.com/forms/d/e/1FAIpQLSelZV549JOKFjKIhv8LumENb3kAzSKi-ZDX2Ourr_lJqpnTRA/viewform

# 上課檔案
https://github.com/sexfat/dd105

# 上課講義
https://cookies.gitbook.io/dev-something/

# gulp 自動話流程講義
https://bryant-huang.gitbook.io/-1/


# 網頁溝通流程
- 網路連線：讓你可以在網路傳送與接收資料。

- TCP/IP：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。

- DNS：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方。

- HTTP超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用協議。可以想成你買東西時會用來溝通的語言。

- Component files：網站由許多不同的文件組成
      程式檔：網站主要是由 HTML、CSS、JavaScript 建立
      其他檔案 ： 這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF ……   


![](https://i.imgur.com/WlAk9A3.png)


# chrome plugin

  
- 網站技術分析 https://www.wappalyzer.com/
 - grid 尺規 https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj


- colorpick https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

- 同文堂 https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW

- 尺規 https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme/related


- 容器隔線
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

- 字體檢查
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh


# 編輯器安裝

1. https://code.visualstudio.com/

2. https://www.sublimetext.com/




# vscode3
![](https://i.imgur.com/sVtSrfd.png)



# 網站分享

日系
- https://www.webdesignclip.com
- http://4db.cc/
- http://nipponcolors.com/#tonoko

美系
- https://www.cssawards.net/
- https://dribbble.com/
- https://www.awwwards.com/
- https://www.behance.net/


# 規劃內容

> 在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照以下所提供的簡易方法，照著來規劃網站的內容與設計。

- 網站主題    
- 建立網站目的  ______________（購物網站 / 官方網站 / 部落格 / 活動
網站）
- 網站需要哪些單元  ______________   （ 關於我們 / 聯絡我們 / 產品資訊 ）
- 網站的主要功能 ___________ （購物車 /  內容管理系統 / 發信系統 ）
- 網站技術解決方案 _____________ (html / css / javascripts / php / mysql  )



# 你的網站在哪裡
當你正在你自己的電腦上編輯你的網站時，你應該將所有相關的檔案放在同一個資料夾中，這反映到未來在伺服器上的檔案架構。這個資料夾可以放在任何地方，但你應該會放在一個容易找到的地方，對吧！像是你的桌面，你的家目錄，或是你硬碟的根目錄。


首先，建立一個新資料夾並命名為 web-projects(或類似名稱)。 這裡將存放你的各種網站專案.
在上述資料夾底下，建立另一個資料夾來存放你的第一個網站，請將這個資料夾命名為 test-site (或其他有創意的名稱).

# 命名規則

>#### 1. 留意大小寫與空格，假設你放了圖片在你的網站上而路徑是 test-site/MyImage.jpg，然後另一個檔案你想放在 test-site/myimage.jpg，這可能是無法運作的。
>#### 2. 避免檔案中文化
>圖片/mypic.jpg 無法運作
images/mypic.jpg 無法運作



# 什麼是html
HTML (Hypertext Markup Language) 並不是一種程式語言，而是一種用來告訴瀏覽網頁的人該如何組織該網頁的標記式語言(markup language)


## html5跟4的差異 

#### 在於標頭的宣告
https://www.w3schools.com/tags/tag_doctype.asp


# 元素屬性


**來動手創造你們的第一個html元素**

- ### 容器元素

![巢狀元素](https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png)

1. 起始標籤 （The opening tag）
2. 結束標籤 （The closing tag）
3. 內容（The content）
4. 元素（The element）


- ### 元素還可以有「屬性（Attribute）」
 
![屬性](https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png)


## 塊元素 與內聯元素
塊元素內聯元素一覽表
https://www.w3schools.com/html/html_blocks.asp

## 何謂塊元素
通常會佔據一整行的，我們叫做塊元素。例如 `<div> <p>`

## 何謂內聯元素
通常只會佔據內容區的元素。例如 `<span>`


## 結構元素

### 結構元素
 跟文件架構有關係的元素
```htmlmixed=
<body>
<section>
<article>
<aside>
<header>
<section>
<main>
<footer>
```

結構

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LQ24OwwZlyZzSLuZtcx%2F-LRq0EV4b6CqI3f3wD_h%2F-LRq4XmZXOs_acpLUgh8%2Fimg_sem_elements.gif?alt=media&token=c2a56690-3739-4c4d-bd3f-8544f8ff8e06)


## 標題元素

```htmlmixed=
<h1><h2>......<h6>
<title></title>
```

## 段落元素

```htmlmixed=
<h1>段落文字</h1>
<div>區塊內容</div>
<p>文章內容</p>
<span></span>
<em>強調</em>
<br> 斷行
<hr> 水平線
<strong>加粗文字</strong>
<dfn>定義項目</dfn>
<code>程式編碼</code>
<samp>計算機樣本</samp>
<kbd>鍵盤輸入</kbd>
<var>變數</var>
<i>斜體字</i>
<del>刪除字體</del>
<mark>記得標籤我</mark>
<small>小而美</small>
<meter value="8" min="0" max="10">度量衡</meter>
<meter value="0.6">60%</meter>
<sub>下標</sub>
<sup>上標</sup>

<pre>還原文件本身特性</pre>
```


## 連結元素

```htmlmixed=
<a href="https://www.oneday.com.tw/no-090/" target="_blank"></a>
```
### 另開新頁
`target="_blank"`

- 要注意何時要另開新頁
- a 標籤要注意是在容器外，還是容器內


## 圖像元素


`src` 主要是連結路徑  `alt` 是圖片說明

- 聯結路徑  ./   ../ 的差異
 
 ```htmlmixed=
 <img src="images/.." alt="圖片說明">
 ```
 
- css
```css=
  table, th, td {
               border: 1px solid black;
                }
             th, td {
                padding: 0 15px;
                text-align: center;
               }
 ```

![image alt](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LQ24OwwZlyZzSLuZtcx%2F-LRqcCROP2Z2NgmMEYiQ%2F-LRqeX1O07WLo8HgwdUL%2Fnumbers-table.png?alt=media&token=f7a02e43-172f-4dd1-8451-80ffa9a7bfe9)

 ![](https://i.imgur.com/pJk05vJ.png)
 



# form 

會員登入

```htmlmixed=
 <form action="function.php">
        <p>
            <label for="account">帳號：</label>
            <input type="text">
        </p>
        <p>
            <label for="psw">密碼:</label>
            <input type="password" name="" id="">
        </p>
        <input type="submit" value="送出"> 
        <input type="reset">
    </form>

```
會員註冊

```htmlmixed=
   <form action="" method="GET">

        <fieldset>
            <legend>會員註冊</legend>
            <p>
                <label for="account">*姓名</label>
                <input type="text" name="name" required>
            </p>
            <p>
                <label for="">*信箱</label>
                <input type="email" name="email" id="" required>
            </p>
            <p>

                <input type="radio" name="gender" id="" value="male">
                <label for="">男</label>
                <input type="radio" name="gender" id="" value="female">
                <label for="">女</label>
                <input type="radio" name="gender" id="" value="other">
                <label for="">其他</label>
            </p>
            <p>
                <h2>你喜歡的運動</h2>


                <input type="checkbox" name="sw" id="" value="sw">
                <label for="">游泳</label>
                <input type="checkbox" name="bas" id="" value="bas">
                <label for="">籃球</label>
                <input type="checkbox" name="cl" id="" value="cl">
                <label for="">爬山</label>

            </p>

            <input type="submit" value="送出">
            <input type="reset" value="重置">

        </fieldset>



    </form>
```


# 完形心理學

群化原則
群化原則中的六大法則(相似性、對稱性、連續性、封閉性、共同命運及接近性)

  1. #### 相似性 (Similarity) — 我們的大腦會把相似的事物看成一體
     如果數個元素具有類似的尺寸、體積、顏色，使用者會自動為它們建立起關聯。這是因為我們  的眼睛和大腦較容易將相似的事物組織在一起。如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成(a)一列方塊和兩列圓形 (b)一排圓形和兩排三角形。

![](https://cdn-images-1.medium.com/max/1200/1*OfNY7DM9SegLhdK6qS4-nw.jpeg)

範例 選單列 同一個層級
可以用來規劃同一層級的元素
或是反向操作，在同一層級元素裡，有突然一個不一樣，就會顯得突兀

![](https://i.imgur.com/Jm2UjH2.png)


 2. #### 接近性 (Proximity) — 我們的大腦會把把靠近的事物看成一體 
     讓我們先來觀察(a)，它是由6條直線均等分布，也因此我們的大腦很容易將六條直線視為一組。但很神奇地，若我們將(1)(2)靠近，(3)(4)靠近，(5)(6)靠近，是不是覺得直線們從一組變為三組呢?
![](https://cdn-images-1.medium.com/max/1200/1*Lsmo38cuK7SxAt4-YakrtQ.jpeg)

範例  可以用來規劃 組元件
![](https://i.imgur.com/lLTq4La.png)


3. #### 連續性 (Continuity)-我們的大腦會把事物看成連續的形體

常用在手機版上的設計
- https://preview.themeforest.net/item/electro-electronics-store-woocommerce-theme/full_screen_preview/15720624?_ga=2.76815382.2011309943.1562772068-552096446.1562772068


![](https://i.imgur.com/rmuP42t.png)



 4. #### 封閉性 (Closure) — 我們的大腦在觀察事物的時候，會將許多個獨立的元素視認為一個完整封閉的圖形。 

我們在觀察事物的時候，傾向將許多個獨立的元素，視為一個封閉的圖案。我們的大腦會自動填補元素和元素間的空白部分，形成一段不存在的線段。如上圖所示，我們可以將一連串的圓點看成一個較大的圓環，也可以將一個不連串的線段看成一個完整的圓，這種視覺特性稱為封閉性。 

![](https://i.imgur.com/B0zGpAG.jpg)

![](https://i.imgur.com/KIrDCpQ.png)




# 手機版 平板設計重點

手機
![](https://i.imgur.com/9SsABid.png)

平板
![](https://i.imgur.com/8mTHtB6.jpg)



# 元件設計

 - 使用放大鏡 icon 
   ![](https://i.imgur.com/vOorMwQ.png)
   
  - 使用輸入框 
   ![](https://miro.medium.com/max/486/1*yDYzrHSilCz5saV0oGoEKg.png)
   
   - 使用動畫
     ![](https://miro.medium.com/max/600/1*N-ARGZMQMsD4Jr8clCDgZg.gif) 
  - 提供按鈕
   ![image alt](https://miro.medium.com/max/964/1*TdeYDirMNNVtfj9J2wN2hg.jpeg) 
  
   - 在每頁都有搜尋列

   - 操作行為簡單
   ![](https://miro.medium.com/max/600/1*zpiYXAZPkvEQt6vQxCSyuw.jpeg)
   
   ## 程式設計重點


  1. ### RWD響應式網站 vs AWD自適應式網站
     響應式網站設計和自適應網站設計可能看起來相同，但它們之間存在很大差異。自適應站點設計需要時間來加載，並且它不像響應式網站設計那樣平穩加載。
https://www.agoda.com/
  
![](https://i.imgur.com/3wjqPcs.gif)

2. ### 流動性
     隨著屏幕尺寸變小，內容開始佔用更多的垂直空間，下面的任何內容都會被推下，它被稱為流程。如果您習慣使用像素和點進行設計，那麼掌握這些可能會很棘手，但是當您習慣它時，這一點很有意義。

![](https://i.imgur.com/sdPk69g.gif)

3. ### 相對單位  

     知道 % and PX 的使用時機
     畫布可以是桌面，移動屏幕或介於兩者之間的任何東西。像素密度也可能不同，因此我們需要靈活且適用於各處的單元。這就是像百分數這樣的相對單位派上用場的地方。所以製作50％寬的東西意味著它總是佔用屏幕的一半（或視口，這是打開的瀏覽器窗口的大小）。

![](https://i.imgur.com/AptHF1C.gif)

4. ### 斷點設計
    - http://gs.statcounter.com/screen-resolution-stats
    - http://devfacts.com/media-queries-breakpoints-2019/

![](https://i.imgur.com/NwPaDhN.gif)


5. ### 最大最小值設定
   內容佔據螢幕的整個寬度非常棒，就像在移動設備上一樣，但是將相同的內容延伸到電視屏幕的整個寬度往往不那麼有意義。這就是Min / Max值有用的原因。例如，寬度為100％，最大寬度為1000px意味著內容將填滿螢幕，但不會超過1000px。

![](https://i.imgur.com/ht4vVgC.gif)

6. ### 組件寫法
   還記得相對位置嗎？很多元素依賴於彼此很難控制，因此容器中的包裝元素使其更容易理解，乾淨整潔。這就像像素這樣的靜態單位可以提供幫助。它們對於您不想擴展的內容非常有用，例如徽標和按鈕。

![](https://i.imgur.com/S5kpPzw.gif)

7. ### 系統字型vs 網頁字體
   系統字體僅限PC用戶。 因此，不要將它們用於響應式網站設計，因為在操作系統支持該字體之前，它們不能在不同的設備上運行。 使用Web字體，因為它們是通用的，可以與所有設備完美配合。不過要考慮到行動網站的速度問題

![](https://i.imgur.com/8g1pu1k.gif)

8. ### 點陣圖vs 向量圖
![](https://i.imgur.com/idz0p2s.gif)




&nbsp;
&nbsp;
&nbsp;
&nbsp;


# 動畫的 12 道 UX 原理

![](https://i.imgur.com/9SJCRjI.gif)



## 第一道原理：Easing（緩和效果）

暫時事件發生時，物體行為符合使用者的預期動作

![](https://miro.medium.com/max/800/1*GCW5UXI3gjSPp4FB7iDXBw.gif)


## 以下兩種動畫哪種比較好
&nbsp;


### linear 固定速度
![](https://miro.medium.com/max/800/1*VdkS1u0jolivbJ2v6vv2_w.gif)

&nbsp;


### elastic motion
![](https://miro.medium.com/max/800/1*ry9cLIP1c-XsXRiomWP3aw.gif)


## 第二道原理：Offset & Delay（位移和延遲）

在新的元素和場景出現時，定義物體之間的關聯和階層

![](https://miro.medium.com/max/800/1*7aCM6vR7lLXt_rvqwELXRA.gif)

![](https://miro.medium.com/max/800/1*jfu4jTFvipOQl3y0yWbJ-A.gif)


## 第三道原理：Parenting（從屬關係）
與多個物體互動時，創造空間和時間上的階層關係

![](https://miro.medium.com/max/800/1*HusZUg_KndTSoyez1tUQ4g.gif)

>Parenting 是物體與其他物體屬性的連結，以會增加易用性的方式產生物體關聯和結構。

![](https://miro.medium.com/max/800/1*4Wg3pmU48e0uccbx9TqWCQ.gif)
![](https://miro.medium.com/max/800/1*MldvNN5bQIasaLzNxlZoSQ.gif)


## 第四道原理：Transformation（變形）

當物體的用途改變時，產生敘事流程的連續狀態

![](https://miro.medium.com/max/800/1*ybN_AkbYHj2EEFl8YBdmwA.gif)


![](https://miro.medium.com/max/800/1*J4sEPkExSokBdVmDJywB-A.gif)


## 第五道原理：Value Change（數值變化）
當數值所屬的項目變化時，創造動態且連續的敘事關係

![](https://miro.medium.com/max/800/1*9mgL3oM9T_Njj5bwhYuVrg.gif)

## 第六道原理：遮罩 (Masking)
讓某一個或一組介面物體的部分隱藏/顯示，藉以創造連續感。
![](https://miro.medium.com/max/800/1*ybL8ireG5XMgkHIW0WetlA.gif)


## 第七道原理：Overlay（重疊）
因為位置而形成的多層 (layered) 物體，在視覺平面空間創造敘事效果。
![](https://miro.medium.com/max/800/1*5moT0fuKr1H5_4KXn5rFmQ.gif)


## 第八道原理：Cloning（複製）
在新物體分離或回到原處時，創造連續性、關聯性與敘事效果。
![](https://miro.medium.com/max/800/1*PSCCHCnGio-Qyj5x0vRMVQ.gif)

## 第九道原理：Obscuration（朦朧化）
讓使用者可以自行在空間裡，依靠非主要視覺階層的物體或場景找到方向。
![](https://miro.medium.com/max/800/1*fACSizmFosOSoidVcsppcQ.gif)

![](https://miro.medium.com/max/1600/1*_blsdStmQjwQm5-ZthUWZQ.gif)


## 第十道原理：Parallax（視差）
當使用者捲動畫面時，在視覺平面上創造空間階層
![](https://miro.medium.com/max/800/1*ak8LbCuKCLHMnqMevMBFpw.gif)
&nbsp;
Parallax（視差）在動畫的 UX 時，是指介面上的物體以不同速度移動。

## 第十一道原理：Dimensionality（空間維度）
新物體進入和離開時，提供空間上的敘事架構

![](https://miro.medium.com/max/800/1*T87ltsDiy5McZRuQb9k5Uw.gif)
&nbsp;
![](https://miro.medium.com/max/1600/1*FLk1LuRKp-N3XZGFoy3msA.gif)


## 第十二道原理：Dolly & Zoom（移動鏡頭和縮放）
移動介面物體和空間時，保持連續感和空間敘事

![](https://miro.medium.com/max/800/1*WD1UCjwmj7i-QKQ0excuSA.gif)

# 網站分享
https://uimovement.com/


# tweenmax


https://greensock.com/docs/
https://greensock.com/docs/v2/Easing

```
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
 ```

- Tweenmax

```jsx=
TweenMax.to('.box1', 3, {
    x: 300,
    y: 300
});
```


```jsx=

TweenMax.to('.box1', 2, {
    x: 800,
    ease: Quad.easeOut,
    // ease: SlowMo.ease.config(0.7, 0.7, false)
    // ease: Bounce.easeOut,
    // ease: Elastic.easeOut
    // ease: Power4.easeOut
});

TweenMax.fromTo('.box2', 3, {
    x: 300
}, {
    x: 700,
    ease: Elastic.easeOut
});
```

## 參數集 option

```jsx=
//位移跟大小
    scaleX:1.5,
    x: 140,
    y: 0,
    boxShadow: "0px 0px 20px red",//陰影
    scale:2, //放大
    delay: 2,//延遲幾秒
    repeat: 3,//重複幾次
    repeatDelay: 2,//重複延遲時間
    yoyo: true,//動畫順序1-2-2-1
    alpha:0,//透明度
    ease: Power3.easeInOut//動畫效果

//旋轉要件
    rotationY: 360, //旋轉
    rotationX: 360 , //旋轉
    transformOrigin : 'right top' //定位點
//透明度
    autoAlpha: 0 //自動消失
//修改classname
//增加一組class
   className: "+=box10"
//覆蓋掉本來的class
   className: "box10"
//路徑  可以走bezier 貝茲曲線 (BezierPlugin)

```

```jsx=
TweenMax.staggerTo('.box3' , 1 , {x:50}, 0.3);
```
## TimelineMax

```jsx=
var tl = new TimelineMax({
    repeat: 1,
    yoyo: true
});

tl.to('.box4', 1, {
    x: 100
}).to('.box4', 1, {
    y: 100
}).to('.box4', 1, {
    x: 200
});
```


# node 安裝 

### 安裝12.4.1 LTS 
https://nodejs.org/en/

### 其他版本的安裝
https://nodejs.org/download/release/v12.0.0/


 - 版本查詢指令
 `node -v`
 
 
 # sass 結構
 https://github.com/sexfat/sass_structure
 
 
 # sass 安裝
 
 https://sass-lang.com/install
 
 `npm install sass -g`
 
 
 - setting.json

```
"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css/"
        }
    ]
 ```   
 
 
 
## 1 變數

```css
$fontSize : 12px;
$color : #333 ;
$bgc :  rgb(190, 0, 0); 
 


body {
    padding: 0;
    margin: 0;
    background-color: $bgc;
    color: $color;
    font-size: $fontSize;
}
h1 {
    padding: 0;
    margin: 0;
    font-size: $fontSize * 3;
}
```


## 2 巢狀

```css
body {
    padding: 0;
    font-family: $fontFamily;
    margin: 0;
    background-color: $bgc;
    color: $color;
    font-size: $fontSize;

    .wrapper {
        h1 {
            padding: 0;
            margin: 0;
            font-size: $fontSize * 3;

            span {
                color: rgb(85, 252, 1)
            }
        }
    }
}
```


## 連結檔案 import + partials

 在base資料夾裡新增 _var.scss  <--- 把變數都放在這裡


```
@import 'base/var';
```


## @mixin


- 不帶值

```css
@mixin margin() {
    margin: 20px;  
}

@include margin(); 

```


- 帶值


 ```css
 @mixin rect($width , $height , $bgc) {
    width: $width ;
    height: $height ;
    background-color: $bgc;
    
    
  @include rect( 300px , 100px , rgb(0, 145, 255));
}
 ```
 
 - 帶預設值
 - null值


## 前綴跨瀏覽器

```css
@mixin animation_module($value) {
    -webkit-animation: $value;
    /* Safari 4+ */
    -moz-animation: $value;
    /* Fx 5+ */
    -o-animation: $value;
    /* Opera 12+ */
    animation: $value;
}
```



## 按鈕組件設計

```css

@mixin btn($width, $padding, $color, $bgc, $border:null, $border-r:null) {
    width: $width;
    padding: $padding;
    text-align: center;
    color: $color;
    background-color: $bgc;
    cursor: pointer;
    border: $border;
    border-radius: $border-r;
    &:hover{
       background-color: darken($bgc ,10);
    }

}

// .btn_wide:hover{
// }

.btn_wide {
    @include btn(200px, 8px, #fff, rgb(0, 238, 255), 0px, 10px);
    margin: 10px 0;
}
```

## 跳脫字串 #{}



```css
@mixin btn_class($class, $width) {
    .#{$class} {
        width: $width;
        padding: 10px;
        text-align: center;
        background-color: #333;
        color: #fff
    }
}

@mixin bg_image($url_files) {
    background-image: url('./images/#{$url_files}.jpg');
}
.bgimages {
    @include bg_image(pic_02);
}
```

## 偽元素 &

```css

.link {
    color: rgb(0, 242, 16);

    &:hover {
        color: #fff;
    }

    &::before {
        content: 'before ';
    }

    &::after {
        content: 'after';
    }
}

```

## prefix module

```css
@mixin prefix($attr, $value) {
    -moz-#{$attr}: $value;
    -o-#{$attr}: $value;
    -webkit-#{$attr}: $value;
    #{$attr}: $value;
}

.boxs {
    @include prefix(transition, all .5s);
}
```

#### 1. 文字置中

```css
@mixin textAlign($value){
    text-align: $value;
   } 
```

#### 2. 引用到其他模組

```css
@mixin box-center($align) {
    margin: 0 auto;
    @include textAlign($align);
}
```

#### 3.應用

```css
.box-center {
    @include box-center(center);
}
```



## 運算子

 ```css
$num : 10;
$num-1 : 20;

.box-plus {
    width: $num + $num-1 + px;
    height : $num - $num-1 + px ;
    margin:  $num * $num-1 + px ;
    font: round($num / $num-1 ) + px; //四捨五入
    font-size: ceil($num / $num-1 ) + px; // 無條件進位
    padding: floor($num / $num-1 ) + px; // 無條件捨去
}
 ```
 
 
## 字體


```css
@mixin titleSize($fontSize) {
    h1 {
        font-size: ceil($fontSize * 4.8);
    }
    h2 {
        font-size: floor($fontSize * 3.2);
    }
    h3 {
        font-size: round($fontSize * 2.8);
    }
    h4 {
        font-size: ceil($fontSize * 2.1);
    }
    h5 {
        font-size: ceil($fontSize * 1.2);
    }
    
    
    //使用
     
     @include titleSize($fontSize);
    
    

}
```



## 判斷式


注意沒有 === 的判斷


```css
@mixin boxArea($marginTop) {
    .box-area {
        @if $marginTop <=20px {
            margin-top: $marginTop;
        }

        @else {
            margin-top: ($marginTop / 2)
        }
    }
}

@include boxArea(20px);
```

## theme 使用判斷式

 #### @content 的使用
 擴增屬性



```css
@mixin theme($theme) {
    @if $theme==green {
        body {
            background-color: green;
            @content
        }
    }
    @else if $theme==yellow {
        body {
            background-color: yellow;
             @content
        }
    }
    @else if $theme==blue {
        body {
            background-color: blue;
            @content
        }
    }
    @else {
        body {
            background-color: #fff;
            @content
        }
    }
}


@include theme(yellow){
  color: #fff; 
}
```



## 迴圈


```css
@for $i from 1 through 100 {
   .for-#{$i}{
    font-size: $i * 1px;
   }
}
```

## Grid

```css=
@for $i from 1 through 12 {
  .col-md-#{$i}{
    width : ($i / 12) * 100%;
  }
}
```

### grid + mixin

```css
@mixin grid($num) {
    @for $i from 1 through $num {
        .col-md-#{$i} {
            width: ($i / $num) * 100%;
        }
    }
}


@include grid(12);
```



## each 

```css

@each $var in a1, a2, a3{
    .img_#{$var} {
        background-image: url('img/#{$var}.jpg');
        width: 100px;
        height: 30px;
    }
}

```




```css
@mixin img_bg($file , $list) {
    @if $file==jpg {
        @each $var in $list {
            .img_#{$var} {
                background-image: url('images/#{$var}.jpg');
            }
        }
    }
    @else if $file==png {
        @each $var in $list {
            .img_#{$var} {
                background-image: url('images/#{$var}.png');
            }
        }
    }
}


@include img_bg(png , a1 a2 a3 a4 box);
@include img_bg(jpg , b1 b2 b3 b4 jpgbox);
```

## @while 迴圈

```css
$a : 12;
$b : 2;

@while $a > $b {
    .item-#{$a} {
       width: 1px * $a
    }
    $a : $a - 2;
}
```

用 mixin 

```css
@mixin items($a , $b){
  @while $a > $b {
    .item-#{$a} {
       width: 1px * $a
      }
      $a : $a - 2;
    }
}

@include items(20 , 2);

```



```css
// rwd 斷點
$desktop :1366px;
$medium : 995px;
$small: 768px;


@mixin rwd($breakpoint) {
    @if $breakpoint==desktop {
        @media all and (min-width :$desktop) {
            @content;
        }
    }

    @else if $breakpoint==medium {
        @media all and (min-width :$medium) {
            @content;
        }
    }

    @else if $breakpoint==small {
        @media all and (max-width :$small) {
            @content;
        }
    }
}
```

RWD 使用

```css
@include rwd(desktop) {
    .wraper {
        width: 1200px;
    }
}
```

## map 

```css
$a-map:(key1 : 10px,
    key2 : 20px,
    key3: 30px);

h1 {
    font-size: map-get($a-map, key3);
    width: map-get($a-map, key1 );
}
```


## map  + @each

```css
$vars :(num1 : 10px,
    num2 : 20px,
    num3: 30px,
    num4: 40px
    );

@each $name , $num  in $vars {

    .items-#{$name} {
        width : $num;
    }
}
```


## h1 

```css
$titleSize : (
    h1 : 48px,
    h2 : 36px,
    h3 : 26px,
    h4 : 18px,
    h5 : 14px);


    
@each $title , $value in $titleSize {
    #{$title} {
     font-size: $value;
    };
}
```


# Gulp Task

## node 版本
https://nodejs.org/dist/latest-v10.x/


### gulpfile.js

```jsx=
gulp.task('concatJs' ,function () {
    gulp.src('js/*.js').pipe(gulp.dest('dest/js'));
});
```

## 引用套件

```jsx
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
```


## 壓縮css

https://www.npmjs.com/package/gulp-clean-css

```jsx=
gulp.task('concatcss' ,function () {
    gulp.src('css/*.css')
    .pipe(cleanCSS({compatibility: 'ie9'}))
    .pipe(gulp.dest('dest/css'));
});

```


## sass 轉譯

https://www.npmjs.com/package/gulp-sass

```jsx=
gulp.task('sass' , function() {
    gulp.src('sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    // .pipe(cleanCSS({compatibility: 'ie9'}))
    .pipe(gulp.dest('css/'));
})
```


## watch


```jsx=
gulp.task('watch' , function(){
  gulp.watch('sass/*.scss', ['sass']);// callback sass function
  gulp.watch('js/*.js', ['concatjs']);
  gulp.watch('*.html', ['concatjs']);
})
```


## gulp-file-include
https://www.npmjs.com/package/gulp-file-include


安裝
`npm install --save-dev gulp-file-include`


引用
```jsx=
var fileinclude = require('gulp-file-include');
```


- gulpfile.js

```jsx=
gulp.task('fileinclude', function() {
    gulp.src(['product.html'])
      .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
      }))
      .pipe(gulp.dest('./dest'));
  });
```




- index.html

```htmlmixed=
 @@include('./header.html')
    <div class="main_wrapper">
      <div class="primary_btn">按鈕</div>
      <div class="secondary_btn">按鈕</div>
      <div class="success_btn">按鈕</div>
      <div class="fail_btn">失敗按鈕</div>
    </div>
    @@include('./footer.html')   
```


- header.html
```htmlmixed=
<header>
    <h1 class="logo">logo</h1>
    <nav><ul>
        <li>選單</li>
        <li>選單</li>
        <li>選單</li>
    </ul>  </nav>
</header>
```

- footer.html
```htmlmixed=
<footer>
    <h2 class="logo">logo</h2>
  </footer>
```


- 變數

 @@title 變數


```htmlmixed=
<title>@@title</title>
<link rel="stylesheet" href="css/main.css">
```



```htmlmixed=
 @@include('./layout/head.html',{
        "title": "產品頁面"
      })
```


# browser-sync 瀏覽器同步

npm install browser-sync --save-dev


```jsx=
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;


gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./dest",
            index: "main.html"
        }
    });
    gulp.watch(['*.html' , '**/*.html'],  ['fileinclude']).on('change',reload);
    gulp.watch(['sass/*.scss' , 'sass/**/*.scss'], ['sass']).on('change',reload);
});
```



# 壓縮圖片

https://www.npmjs.com/package/gulp-imagemin


```jsx=

var imagemin = require('gulp-imagemin');

gulp.task('mini_img', function () {
    gulp.src('dev/img/*.*')
      .pipe(imagemin())
      .pipe(gulp.dest('dest/mini_img/'))
  });
```


# gulp-sourcemaps

- https://www.npmjs.com/package/gulp-sourcemaps


TweenMax


```jsx=
TweenMax.to('.box-wide' ,2 , {

    rotationY : 360,
    transformOrigin : 'left  50% -700' ,//定位點
    transformPerspective: 100




})
```




TweenMax bezier

```jsx=
TweenMax.to('.bezier', 2, {
    bezier: {
        values: [{
                x: 0, //節點1
                y: 0
            },
            {
                x: 600,
                y: 600
            },
            {
                x: 300,
                y: 400
            },{
                 x: 200,
                 y: 100
            }
              
        ],
        autoRotate : false // 方向
    },
    ease : Elastic.easeOut

})
```


# Scrollmagic

```htmlmixed=
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
```

- html
```htmlmixed=
<div id="trigger01"></div>
    <section class="section_02">
        <div class="box bezier">bezier</div>
        <div class="box scroll01">scroll</div>
    </section>

```



- js

```jsx=

//加入controller
var controller = new ScrollMagic.Controller();


//第一個場景
var scroll01 =  TweenMax.to('.scroll01' , 1 , {
    x: 200,
    y: 200
});


 new ScrollMagic.Scene({
    triggerElement : '#trigger01',
    offset : 0, //start1
    triggerHook: 0, // trigger01
    reverse: false, //動畫返回
    duration :500 //scroll 移動距離
 }).setTween(scroll01)
 .addIndicators() // 觸發點指標
 .addTo(controller);
```


- html
```htmlmixed=
    <div id="trigger02"></div>
    <section class="section_03">
        <div class="box scrollcss">css</div>
    </section>

```

- scss
```css=
.section_03 {
    transition: all 1s ease-in-out;
  &.on{
   background-color: rgb(205, 104, 255);

  }

```



- js
```jsx=
var cssbox =  TweenMax.to('.scrollcss' , 1 , {
  y: 300,
  x: 300
})



new ScrollMagic.Scene({
    triggerElement: '#trigger02',
    triggerHook: 0
}).setClassToggle('.section_03', 'on').setTween(cssbox).addIndicators().addTo(controller);
```




- html

```htmlmixed=
    <div id="trigger03"></div>
    <section class="section_04">
        <div class="box stick01">stick01</div>
        <div class="box stick02">stick02</div>
        <div class="box stick03">stick03</div>


    </section>




new ScrollMagic.Scene({
    triggerElement: '#trigger03',
    triggerHook: 0,
    duration: '300%'
}).setPin('.section_04').setTween(timelinemaxMv).addIndicators().addTo(controller);
```


- js
```jsx=
var timelinemaxMv = new TimelineMax();


timelinemaxMv.to('.stick01' , 1 , {x: 300}).to('.stick02' , 1 , {x: 300}).to('.stick03' , 1 , {x: 300});



new ScrollMagic.Scene({
    triggerElement: '#trigger03',
    triggerHook: 0,
    duration: '300%'
}).setPin('.section_04').setTween(timelinemaxMv).addIndicators().addTo(controller);
```


- waypoint
http://imakewebthings.com/waypoints/

- velocity
http://velocityjs.org/




































