# 7.1.利用Sass & media query在不使用框架下完成RWD

## 1.目的

* 1.有多種版型, 但每種版型的內容很類似, 例如title, sub title, description, image
* 2.RWD的需求: 每種版型會依device的螢幕大小改變排版 (例如desktop, mobile有不同排版)

## 2.SCSS

* SCSS(即Sally CSS)在Sass 3.0中被引入, Sass要解決的問題如下:
  * 1.動態思維
    * 現今的網頁開發方式已經從靜態的HTML發展到以模板的形式提供給引擎或框架來做預處理後產生HTML, Sass的目的則是**動態產生靜態樣式表**, 例如**通過條件判斷, 可重複使用的程式碼, 變量**以及其他各種工具讓撰寫樣式表更方便, 而不需要一昧的複製貼上
  * 2.避免重複勞動
    * **變量, 混合器**等機制可以避免重複勞動(複製貼上等)
* 重要觀念
  * 變量
  * 嵌套
  * 混合器

## 2.media query

## 4.compass

## 5.利用sass & media query完成RWD

* 1.需求
* 2.實作
