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.實作