![[CSS]Booststrap 4 breakpoint mixin](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/09/bootstrap-social.png)
[CSS]Booststrap 4 breakpoint mixin
之前有寫過一篇文章 使用sass mixin來開發responsive網站
[http://skyroxas.tw/%E4%BD%BF%E7%94%A8sass-mixin%E4%BE%86%E9%96%8B%E7%99%BCresponsive%E7%B6%B2%E7%AB%99/]
，利用 SASS 提供的 Mixin 來加速 Responsive
sass
![[DevelopTool]前端自動化：Gulp 學習路程](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/03/05-gulp-notifications.png)
[DevelopTool]前端自動化：Gulp 學習路程
本篇目標:
* 初步認識 Gulp (安裝與使用)
* 建立前端自動化安裝環境
* 自訂屬於自己的 Gulp 開發環境
--------------------------------------------------------------------------------
初步認識 Gulp：
Gulp 為 Node.js 的套件，可以自訂屬於自己的前端自動化環境，簡單點說可以幫你一次解決：
* SASS、LESS 自動編譯為 CSS
* 自動加入 “瀏覽器前綴” 給你的 CSS 屬性
* 自動幫你編譯 Jade 為 Html
* 壓縮圖片
* 打包壓縮
使用sass mixin來開發responsive網站
RWD為響應式網站（Responsive Web Design）的縮寫，為2012年以來，最流行的前端技術之一
通過 CSS3 的 Media Query ，可以讓網頁在不同尺寸的裝置下，都可以套用不一樣的CSS Style，讓每個不同裝置同樣瀏覽網頁，都可以用最佳的畫面
來瀏覽。
而為了要開發RWD的網頁與簡化撰寫 CSS 流程，進而有了 SASS、LESS 等工具來協助開發，但是難免開發久了，不免都還是會覺得又臭又長。利用 SASS
的Mixin 功能，搭配本篇特殊結構，可以讓開發模板的時間更為簡潔。