---
# System prepended metadata

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

---

###### tags: `前端設計工程師養成班`
# ED101 Web/APP前端設計工程師養成班


# github 檔案連結
https://github.com/sexfat/ed101

# sass 講義
https://sexfat.gitbooks.io/greenie-s-manual/content/

# sass結構案例參考
https://github.com/sexfat/sass_structure

# 基礎組件。越底層，就說明可複用的程度越高、越通用


# Gulp template

https://github.com/sexfat/ed101gulp



# 第一組






# gulp 文件

node 版本

https://nodejs.org/en/download/releases/

```jsx=
var gulp = require('gulp');

gulp.task('hello', function(){
    //do
    console.log('hello world 你好');
});


gulp.task('move',function(){
   //do
   return gulp.src('index.html') //來源
   .pipe(gulp.dest('dest/')) //目的地
})
    
});
```


## 壓縮css

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

- 安裝
```
npm install gulp-clean-css --save-dev
```



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

 gulp.task('minicss',function(){
    //do
    return gulp.src('css/*.css') //來源
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dest/css')) //目的地
 })
```

## 合併css


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

```jsx=
//合併 css

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

 gulp.task('concat',function(){
    //do
    return gulp.src('css/*.css') //來源
    .pipe(concat('all.css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))//壓縮
    .pipe(gulp.dest('dest/css')) //目的地
 })

```


## sass 轉譯

```jsx=

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

 gulp.task('sass', function () {
    return gulp.src('./sass/*.scss')//來源
      .pipe(sass().on('error', sass.logError)) //sass轉譯
      .pipe(gulp.dest('./css')); //目的地
  });

```

## 瀏覽器同步
 
 `npm install browser-sync --save-dev`
 
 
 ```jsx=
 var browserSync = require('browser-sync').create();
 
 var reload = browserSync.reload;
 
 
 gulp.task('sync', function() {
    browserSync.init({
        server: {
            baseDir: "./dest",
            index : "index.html"
        }
    });
     gulp.watch('./*.html' ,['move']).on('change',reload);
});
 
 
 
 
 ```
 
 
 ## html 樣板
 
 https://www.npmjs.com/package/gulp-file-include
 
 ```jsx=
 // html 樣板
 
 
 var fileinclude = require('gulp-file-include');
 
gulp.task('fileinclude', function () {
  gulp.src(['*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./dest'));
});
 
```


- html

index.html

```htmlmixed=
 <!-- 選單 -->
 
    @@include('./app/nav.html')
    <h1>首頁
    </h1>
    <!-- footer -->
    @@include('./app/footer.html')
```


- nav.html


```htmlmixed=
<nav>
    <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
    </ul>
</nav>

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



 

















# Gsap動畫套件


### 安裝
- https://greensock.com/docs/v2

```htmlmixed=
<script src="node_modules/gsap/src/minified/TweenMax.min.js"></script>
```


- https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js




```jsx=
TweenMax.to('.box_basic', 3, {
    // x: '200px',
    // y: '200px',
    repeat: -1,
    // ease: Power0.easeNone,
    // ease: Back.easeOut,
    ease: SteppedEase.config(12),
    // repeatDelay:1,
    // yoyo:true
    // rotation: 360,
    // rotationX: 360,
    // rotationY: 360,
    transformOrigin:'10px top 400',
    transformPerspective: 3600,//攝影機鏡頭位置
    // scaleX : 3,
    // scaleY : 3,
    // opacity : 0,
    width: 700,
    height: 400,
    boxShadow: '4px 4px 20px red'
});
```

# tweenmax 方法

```jsx=
// to from fromTo
TweenMax.to('.box_to', 2, {
    x: 300
});

TweenMax.from('.box_from', 2, {
    x: 300
});
TweenMax.fromTo('.box_fromTo', 1, {
    x: 100//a
}, {
    x: 500//b
})

TweenMax.staggerTo('.box_staggerTo' , 1 , {
    x: 200
}, 1)
```





#  時間軸動畫 TimelineMax

```jsx=


var tlmax = new TimelineMax({
   repeat: -1,
   yoyo: true

});

tlmax.to('.box_a', 2, {
    x: 300
}).to('.box_b', .2, {
    y: 300
}).to('.box_c', 2, {
    y: 300,
    x: 400
});

```



# 補間動畫
- https://greensock.com/docs/v2/Easing

## 參數集介紹 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,//透明度
    autoAlpha: 0 //透明度
    ease: Power3.easeInOut//動畫效果

//旋轉要件
    rotationY: 360, //旋轉
    rotationX: 360 , //旋轉
    transformOrigin : 'right top' //定位點
//透明度
    autoAlpha: 0 //自動消失
//修改classname
//增加一組class
   className: "+=box10"
//覆蓋掉本來的class
   className: "box10"






```

# Scrollmagic


### CDN
https://cdnjs.com/libraries/ScrollMagic?fbclid=IwAR0ujnya--bI_Ty5akLEp5Jaz5ZcofogYqpTjBQdw-8uGnglwuZ_8zW3_LE




https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js


https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js


```htmlmixed=
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<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>
```



- js
```jsx=
//加入控制器
var controller = new ScrollMagic.Controller();

//動畫
var tweenscroll = TweenMax.to('.box_scroll' , 1, {
    x: 400
});
//觸發事件    
new ScrollMagic.Scene({
    triggerElement: '#keypoint1',
    offset: 100, //觸發點場景位置
    triggerHook: .2//瀏覽器觸發位址
}).setTween(tweenscroll).addIndicators().addTo(controller);    

```


- html
```htmlmixed=

 <div id="keypoint1"><!-- 觸發點 --></div>
        <section class="bg3">
            <div class="box box_scroll">scrollmagic</div>
        </section>
```

- css


```css
section {
    width: 100vw;
    height: 100vh;
    }
.box {
    width: 160px;
    height: 80px;
    top: 60px;
    position: relative;
    left: 45%;
    background-color: rgb(70, 248, 0);
}    




.bg3 {
   background-color: rgb(39, 39, 39);
}

```


### timelinmax


- js

```jsx=
var tweenline = new TimelineMax();

tweenline.to('.box_scroll01' ,1 ,{
    x: 300
}).to('.box_scroll01' , 1,{
    y:400
}).to('.box_scroll01' , 1 , {
     x: 500
})



//scoll 觸發事件
new ScrollMagic.Scene({
    triggerElement: '#keypoint2',
    offset: 0,
    // triggerHook: .3,
    // duration: 400,
    reverse: true,
}).setClassToggle('.bg4','on').setTween(tweenline).addIndicators({
    name: 'keypoint02'
}).addTo(controller);
```

- html


```htmlmixed=
 <div id="keypoint2"></div>
        <section class="bg4">
            <div class="box box_scroll01"></div>
        </section>
```

- css 

```css
.bg4 {
  transition: all 1s ease-in-out;
  background-color: #1f1f1f;
}

.bg4.on {
  background-color: #ff0707;
}

```

### 固定場景

- html
```htmlmixed=
<div id="keypoint3"></div>
        <section class="bg5">
            <div class="wrapper">
                <div class="text text1">精彩不少，付出不多。</div>
                <div class="text text2">iPhone SE 擁有我們最強大的晶片和最受歡迎的尺寸</div>
                <div class="text text3">更有讓你心動不已的價格。一切</div>
                <div class="text text4">玻璃與鋁金屬設計堅固耐用</div>
            </div>

        </section>
```

- 實作
https://scrollmagic.io/examples/advanced/section_wipes_manual.html


```htmlmixed=
 <div id="keypoint5"></div>
        <section class="bg7">
            <div class="boxpallax1 box">1</div> 
            <div class="boxpallax2 box">2</div> 
            <div class="boxpallax3 box">3</div> 
        </section>
```


- css

```css=
.bg7 {
  background-color: #cca4ff;
  background-image: url(https://placem.at/people);
  background-size: cover;
}

.bg7 .box {
  margin-bottom: 10px;
  width: 300px;
}

.bg7 .boxpallax1 {
  position: relative;
  top: 300px;
  left: 600px;
}

.bg7 .boxpallax2 {
  position: relative;
  top: 300px;
  left: 700px;
}

.bg7 .boxpallax3 {
  position: relative;
  top: 200px;
  left: 800px;
}

```


- js

```jsx=
//滾動式差

var parallaxs = new TimelineMax();


var parallax_01 = TweenMax.to('.boxpallax1'  ,1 , {
    y: '-10%'
})

var parallax_02 = TweenMax.to('.boxpallax2'  ,1 , {
    y: '50%'
})

var parallax_03 = TweenMax.to('.boxpallax3'  ,1 , {
    y: '-120%'
})


parallaxs.add([parallax_01 , parallax_02 , parallax_03]);



//scoll 觸發事件
new ScrollMagic.Scene({
    triggerElement: '#keypoint5',
    duration: '100%'
}).setTween(parallaxs).addIndicators({
    name: 'keypoint05'
}).addTo(controller);
```




- css

```css
.bg5 {
  background-color: #414141;
}

.bg5 .wrapper {
  width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}

.bg5 .text {
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}
```




- js
```jsx=
// 固定住場景
var tlstick = new TimelineMax();



tlstick.fromTo('.text1', 1, {
    x: -100,
    opacity: 0
}, {
    x: 0,
    opacity: 1
}).fromTo('.text2', 1 , {
    x: -100,
    opacity: 0
},{
    x: 0,
    opacity: 1
}).fromTo('.text3', 1 , {
    x: -100,
    opacity: 0
},{
    x: 0,
    opacity: 1
}).fromTo('.text4', 1 , {
    y: -100,
    opacity: 0
},{
    y: 0,
    opacity: 1
})





//觸發事件
new ScrollMagic.Scene({
    triggerElement: '#keypoint3',
    offset: 0,
    triggerHook: 0,
    duration: '400%',

}).setPin('.bg5').setTween(tlstick).addIndicators({
    name: 'keypoint03'
}).addTo(controller);
```










前言

# 何謂 UI

UI（User Interface）使用者介面，主要專業是設計頁面上的功能、顧及使用的便利性與整個設計的美學，網站的美觀性和他息息相關

# 何謂  UX
UX（User Experience）使用者體驗，則是根據使用者的習慣，安排整個網站頁面的內容規劃，像是哪些區塊的內容要先在網站上出現，行動呼籲按鈕（Call to Action, CTA）的位置應該擺在哪裡。

# 最終

終端使用者與公司網站的互動行為的總和，而此行為的目的是要達成一個目標（取得資訊、下訂單、連絡公司等等）就對了


# 產品故事


1. **選定主題** 
   （假設）資訊分享平台



   (* 當選定主題後，開始分析研究)
2. **產品介紹** 
   - 我們的產品主要是做什麼服務的，能夠你們有效的完成哪些事
   - 我們整理許多主題讓分享更輕鬆，因此您可以專注於真正重要的事情，讓客戶過上更好的生活。我們正在與您一起努力，體驗的未來。

3. **產品目標**

   - 關於這個產品提供哪些服務，主要是解決哪類的問題

4. **使用主族群** 

   - 應用產業 ：科技業
   - 目標用戶 ：工程師

5. **案例研究**
   - 電商研究

6. **需求列表**

   - list log更動列表
   - 注意事項

7. **開始專案**
   
   - sitemap
     ![](https://i.imgur.com/njWAHHm.png)

   - wireframe
    ![](https://i.imgur.com/8E4jtRh.jpg)


   - ui flow
     ![](https://i.imgur.com/cZvn7Fn.jpg)
   - prototype
   - mockup

8. 開發階段


- 學姊的作品
http://140.115.236.71/demo-personal/DD103/web/%e7%b0%a1%e5%a0%b1PDF/T1900826%ef%bc%bf%e8%b3%b4%e6%80%a1%e5%ae%89%ef%bc%bf%e8%8a%b1%e7%b3%b8.pdf



## UI UX 差異

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




## 日系網站
https://www.webdesignclip.com/

## 歐美網站
https://www.awwwards.com/

## Design system
https://designsystemsrepo.com/design-systems/

## ui 動態
https://uimovement.com/


## FwA
https://thefwa.com/

## dribbble
https://dribbble.com/

## Google Font
https://fonts.google.com/



# 產品組成
    - 產品的組成大約可以拆分成 頁面 > 元件 > 元素 > 圖（影片）、文字、icon、表單、互動 等。
    - 各元素都可能需要制定 色彩、透明度、尺寸、間距、檔案格式、品質、風格 等。互動包含 手勢操作、過場動畫、特效、音效、震動 等。


 ## 網頁介面組成 
  
  
  ![](https://i.imgur.com/P5XalcN.png)
  
  
  
# 動畫原理  

http://preview.themeforest.net/item/xen-creative-agency-html5-template/full_screen_preview/23571969?_ga=2.98233943.99256698.1577228677-552096446.1562772068


https://matthew.wagerfield.com/parallax/


http://springsummer.gucci.com/

https://threejs.org/

https://www.town.shimane-misato.lg.jp/misatoto/

https://store.google.com/us/product/pixel_4?hl=en-US

https://www.cssdesignawards.com/


# 動畫的 12 道 UX 原理

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





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

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

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

>所有暫時動作（不論即時或非即時）的介面物體都要有 Easing（緩和效果）。Easing 可以無縫地創造、加強使用者經驗的「自然感覺」，當物體如使用者所預期的移動，就會營造出連續感。很巧的是，迪士尼稱之為「Slow In 和 Slow Out。」


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


## 以下兩種動畫哪種比較好
&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)



左邊的動畫是 Linear（固定速度）的，看起來很「差」，而上方第一個有 Easing 的範例就看起來很「好」。以上三個範例都有相同數量的影格 (frame)，花費的時間完全一樣，唯一的差別在 Easing。


![](https://media.giphy.com/media/xUA7b33JvJ1voBJhU4/giphy.gif)


&nbsp;
&nbsp;


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

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

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



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

- 案例1 Profect Expert
https://preview.themeforest.net/item/contra-html-template-for-architecture-construction-and-interior-design/full_screen_preview/23189643?_ga=2.87955614.723204759.1577228366-552096446.1562772068

- 案例二  
http://preview.themeforest.net/item/xen-creative-agency-html5-template/full_screen_preview/23571969?_ga=2.98233943.99256698.1577228677-552096446.1562772068



&nbsp;
&nbsp;

## 第三道原理：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)


&nbsp;
&nbsp;

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

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

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

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


&nbsp;
&nbsp;

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

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

&nbsp;
&nbsp;

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


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


&nbsp;
&nbsp;

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


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


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

&nbsp;
&nbsp;

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

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

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

![](https://miro.medium.com/max/800/1*WD1UCjwmj7i-QKQ0excuSA.gif)
  
 
 
 # 完形心理學

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

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

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

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

![](https://i.imgur.com/Jm2UjH2.png)
- https://flatsome3.uxthemes.com/demos/shop-demos/parallax-shop/
  

- https://demo2.madrasthemes.com/electro-wide/home-v4
  電商很常用這種手法來規劃產品

- http://preview.themeforest.net/item/kaleo-creative-ajax-portfolio-template-grid/full_screen_preview/20884285?_ga=2.13145207.135374206.1562775624-552096446.1562772068

  標題一至性 
   
 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)


- https://www.portotheme.com/wordpress/porto/shop10/

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

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

- 瀑流網站
 http://wp-royal.com/hyper-x/ares/
![](https://i.imgur.com/rmuP42t.png)



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

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

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

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

- 網站運用
  隔線系統 增加穩定性
 
  
  
  
  
  # Sass
  
  https://sass-lang.com/guide
  
  https://github.com/sexfat/ed101
  
  
  
  ##  vscode sass plugin
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass


```jsonld=
"liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ]
```



```jsonld=
"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css/"
        }
    ],
```


## 顏色函式


darken( 顏色 , 數值)

```css=
  background-color: darken($btn-color  , 10);
    background-color: lighten($btn-color  , 10);
```



```css=
@mixin btncom($class , $bgc , $border-color:none) {
  #{$class} {
    max-width: 120px;
    padding: 8px 13px;
    background-color: $bgc;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    border: 1px solid $border-color;
    &:hover {
      background-color: lighten($bgc, 10);
    }
    @content
  }
}
```

```
@include btncom('.btn-com' , rgba(255, 34, 0, 0) ,rgb(207, 169, 43)){
                 color: rgb(207, 169, 43);

            }
```            



# @extend

```css=
 %border-outline {
        border:1px solid #000;
    }
    
 @extend %border-outline;
// 
 .border-outline {
        border:1px solid #000;
    }
    
 @extend .border-outline;
  
```

# 運算

```css=
$a : 100;
$b: 200;

.box-plus {
  width: $b + $a + px;
  height: $b - $a + px;
  margin: 10 * (20 + 20px);
  font-size: (20px / 2);
}


.width {
    font-size: ceil(13.1px); //無條件進位
    font-size: floor(13.5px);// 捨去
    font-size: round(13.2px);// 四捨五入
}
```

# title module

```css=
@mixin htitle ($fontsizes) {
    h1 {
        font-size: round($fontsizes * 5);
    }

    h2 {
        font-size: round($fontsizes * 4.6);
    }

    h3 {
        font-size: round($fontsizes * 3.5);
    }

    h4 {
        font-size: round($fontsizes * 2.6);
    }

    h5 {
        font-size: round($fontsizes * 1.2);
    }
}


@include htitle(14px);
```


```css=
@mixin border( $dir , $bordercolor){
   border-#{$dir} :  1px solid $bordercolor 
} 


@mixin htitle ($fontsizes) {
    %borderbottom {
        border-top: 1px solid #000;
    } 
    h1 {
        font-size: round($fontsizes * 5);
        @extend %borderbottom;
        // @include border (top , #000);
        
    }

    h2 {
        font-size: round($fontsizes * 4.6);
        @extend %borderbottom;
        // @include border (top , #000);
       
       
    }

    h3 {
        font-size: round($fontsizes * 3.5);
        @include border (top , #000);
       
    }

    h4 {
        font-size: round($fontsizes * 2.6);
        @include border (top , #000);
       
    }

    h5 {
        font-size: round($fontsizes * 1.2);
        @include border (top , #000);
       
    }
}


@include htitle($fontsize);
```


# 迴圈

```css=
@for $i from 1 through 20 {
    .col-#{$i} {
       width:  $i * 1px; 
    } 
}
```

# grid

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


@include grid(16);
```

# push module 

```css=
@mixin push($dir, $num) {
    @for $i from 1 through $num {
        .margin#{$dir}#{$i} {
            // margin-left: $i * 1px;
            position: relative;
            #{$dir}: $i * 1px;
        }
    }
}


@include push('left',300);
@include push('top',300);
```


```css=
$list : a1 a2 a3 a4 a5 b1 b2 b3;

@each $imgUrl in $list {
 .img-#{$imgUrl} {
   background-image: url('img/#{$imgUrl}.jpg');
 } 
}
```


# 判斷jpg or png

```css=
@mixin imgUrl($list , $style:jpg) {
    @each $imgUrl in $list {
        @if $style == 'jpg' {
            .img-#{$imgUrl} {
                background-image: url('img/#{$imgUrl}.jpg');
            }
        }@else {
            .img-#{$imgUrl} {
                background-image: url('img/#{$imgUrl}.#{$style}');
            }
        }
    }
}
```

```css=
@include imgUrl(a1 a2 a3 ,png );
@include imgUrl(a12 a22 a32);
```



```css=
   $list : (
        h1 : 40px,
        h2 : 30px,
        h3 : 20px,
        h4: 15px,
        span :  30px,
        '.box' :  30px
        );


    @each $key,$val in $list {
        #{$key} {
            font-size: $val;
        }
    }
```

# rwd 組件


```css=

$large : 1200px;
$medium : 996px;
$small : 720px;


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


@include rwd(large) {//內容}
@include rwd(medium) {//內容}
@include rwd(small) {//內容}


```


