前言 RWD為響應式網站(Responsive Web Design)的縮寫,為2012年以來,最流行的前端技術之一,通過CSS3的Media Query,可以讓網頁在不同尺寸的裝置下,都可以套用不一樣的CSS Style,讓每個不同裝置同樣瀏覽網頁,都可以用最佳的畫面來瀏覽。而為了要開發RWD的網頁與簡化撰寫CSS流程,進而有了SASS、LESS等工具來協助開發,但是難免開發久了,不免都還是會覺得又臭又長。利用SASS的Mixin功能,搭配本篇特殊結構,可以讓開發模板的時間更為簡潔。 傳統media queries寫法: //電腦版 @media all and (min-width: 960px) { .div1{ padding:20px; } .div2{ margin:20px; } } //平板 @media all and (min-width: 760px) and (max-width: 959px) { .div1{ padding:10px; } .div2{