老成的Sass&Compass
Download as PPTX, PDF7 likes2,688 views
文档介绍了Sass和Compass的基本知识，包括Sass的巢状结构、变量、运算式以及函数等特性，强调了这些功能如何提高CSS的编写效率。文中还提到Compass作为Sass的扩展，提供了简化的CSS编写方式和实用功能，如自动前缀处理和图片精灵生成。此外，作者建议在项目中将Sass代码模块化管理，以提高维护性和可读性。
老成的Sass&Compass
- 4. 這樣比較容易了解吧
- 5. 我為什麼用sass?
- 6. 1. 在上千行css中不斷的尋找要修改的地方! 2. 一直在複製貼上同樣的css，只為了class名稱不一樣! 3. 寫css3要一直加前綴字! 4. 一直在看密密麻麻的css好像在玩「威利在哪裡？」 5. css越寫越無聊! 6. 還有很多只是不想繼續說下去……..
- 10. sass scss
- 11. 簡單說就是一個有花括號、分號(scss)，一個沒有(sass) scss 對於會寫 css 的人來說，比較容易上手，接下來就都以scss作為範例
- 12. 但是瀏覽器並不認識Sass
- 14. Sass特性 • 巢狀結構 • 變數 • 運算式（＋ , - , * , / , %） • number函式 • Function函式(@mixin,@include) • 判斷式(@if,@else if) • 迴圈(@for,@while,@each) • 繼承(@extend) • 載入(@import) • 太多功能了，等等直接看範例啦!!!
- 15. 註解 • 單行註解 //這是一行註解，不會編譯結果出現 • 多行註解 /* 這是很多行 用的註解 */
- 17. 馬上來看sass強大的地方
- 21. 還是有小地方要注意
- 23. • percentage() //百分比 • round() //四捨五入 • ceil() //無條件進位 • floor() //無條件捨去 • abs() //絕對值 Number函式
- 26. 注意！
- 30. 還可以給予變數預設值
- 31. 接下來就是稍微有邏輯的部分
- 35. @while
- 36. @each
- 37. 繼承(@extend)
- 42. 看到這裡是不是覺得很方便！
- 43. 看到這裡是不是覺得很方便！
- 44. 中場休息 10 分鐘！
- 45. config.rb相關設定
- 48. 簡單來介紹config.rb 設定： 1. http_path 指的是根目錄位置。 2. css_dir 指的是你css的路徑。 3. sass_dir 指的是你sass的路徑。 4. images_dir 指的是你圖片的路徑。 5. javascripts_dir 指的是你javascript的路徑。
- 50. output_style 意思則是指你的編譯出來的CSS要用哪種方式呈現出來。 編譯共有下述四種方式： 1. expanded = 一般，每行CSS皆會斷行。 2. nested = 有整理過，易閱讀。 3. compact = 匯出來的CSS檔案大小比上面兩個還小。 4. compressed = 壓縮CSS，將所有的CSS都以一行來排列。
- 51. line_comments = false 關閉Sass編譯出來的註解!
- 52. 接下來就是重頭戲了
- 55. 就像這樣!!!
- 56. Compass超好用功能之一 • Compass&css3 超好用前綴字處理 只要@import “compass/css3” 就使用@include 方式就可以自動幫你產生前綴字
- 57. Compass超好用功能之二 • 內建reset 只要@import “compass/ reset.scss”
- 58. Compass超好用功能之三 • 一邊挖鼻屎也可以快速做出 CSS Image Sprites ( 只支援png ) • @import “compass/utilities/sprites”; //先import • $icon-layout : horizontal; //產出的圖片是直得還橫的，直的不用寫 • $icon-spacing : 10px; //每張圖片的間距距離多少px • @import “icon/*.png”; //選擇圖片路徑 • @include all-icon-sprites(true); //產生圖片
- 61. 最後自動合併一張
- 64. Sass專案的規畫
- 66. 等等!!!好像哪裡怪怪 的……
- 69. 簡單的拆法 1. _mixin.scss = 放置全部的變數與Mixin函式 2. _reset.scss = reset.css 3. _extnd.scss = 拿來合併樣式，都放@extend用的檔案 4. _layout.scss = 共用的設定。 5. _color.scss = 網站主要的顏色色系。 6. _hender.scss = hender 。 7. _content.scss = content。 8. _footer.scss = footer。 9. index.scss = 彙整上面所有的scss
- 70. index.scss =
- 72. 環境安裝
- 76. 然後開啟命令提式字元
- 80. 先指定路徑到你的專案資料夾 再輸入 compass watch Sass compiler 將sass轉換成css
- 83. 開發工具介紹
- 85. Sublime Text 3 sass開發套件 1. SASS 2. SCSS 3. ConvertToUTF8 4. Emmet 5. SassBeautify 6. HTML-CSS-JS Prettify 7. BreaketHighlighter 8. ColorHighlighter
- 86. Q&A時間
- 87. 參考資料 1. http://ilandy-chiu-blog.logdown.com/posts/188205-mac-install-sass 2. https://github.com/hlb/sass-doc-zh/blob/master/SASS_REFERENCE_ZH_TW.md 3. http://frontend.inow.tw/sass2/#/ 4. http://www.slideshare.net/kurotanshi/compass-sass 5. http://peiwen.lu/how-to-structure-a-sass-project/ 6. http://mvcss.ycnets.com/styleguide/ 7. http://sam0512.blogspot.tw/2013/10/sass.html
- 88. 謝謝各位!