SASS & Compass 101

Transcript

1. 請先⾄至 http://goo.gl/XFtR7l 下載 Prepros 並安裝到 C:\使⽤用者\student
2. SASS & COMPASS 資訊系統訓練班 246 期
3. 今⽇日介紹 SASS (SCSS 檔) 更好寫的 CSS。 Compass 函式庫 套件管理 Bootstrap-sass
4. CSS 好多重複。
5. #top-bar { height: 92px; overflow: auto; } #top-bar h1{ width: 124px; height: 92px; background: url(../images/logo.png) center center no-repeat; color: transparent; font: 0/0 a; text-shadow: none; float: left; } #top-bar ul{ margin: 53px 0 0 45px; float: left; list-style: none; }
6. .seriousError { border: 3px #f00; background-color: #fdd; } .inputError { border: 1px #f00; background-color: #fdd; } .seriousError, .inputError { border-color: #f00; background-color: #fdd; } .seriousError { border-width: 3px; } .inputError { border-width: 1px; } 可能會忘記 .inputError 的樣式 在前⾯面曾經設定過
7. .shadows { -moz-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999; -webkit-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999; box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999; } .shadows-invert { -moz-box-shadow: 0px -4px 5px #666666, 2px -6px 10px #999999; -webkit-box-shadow: 0px -4px 5px #666666, 2px -6px 10px #999999; box-shadow: 0px -4px 5px #666666, 2px -6px 10px #999999; }
8. SASS 兩種語法：SASS 與 SCSS (Sassy CSS) SCSS 語法為 CSS 的擴充。
9. SASS Nesting Variables @include @extend 附檔名：.scss
10. Variables (變數) $header-height: 40px; .header{ position: fixed; top: 0; left: 0; width: 100% height: $header-height; } .contents{ padding-top: $header-height; }
11. Nesting #top-bar { height: 92px; overflow: auto; h1{ width: 124px; height: 92px; background: url(../images/logo.png); color: transparent; font: 0/0 a; text-shadow: none; float: left; } ul{ margin: 53px 0 0 45px; float: left; list-style: none; } } #top-bar { height: 92px; overflow: auto; } #top-bar h1{ width: 124px; height: 92px; background: url(../images/logo.png); color: transparent; font: 0/0 a; text-shadow: none; float: left; } #top-bar ul{ margin: 53px 0 0 45px; float: left; list-style: none; }
12. @extend .seriousError, .inputError { border-color: #f00; background-color: #fdd; } .seriousError { border-width: 3px; } .inputError { border-width: 1px; } %error { border-color: #f00; background-color: #fdd; } .seriousError { @extend %error; border-width: 3px; } .inputError { @extend %error; border-width: 1px; }
13. @include @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } .shadows-invert { @include box-shadow(0px -4px 5px #666, 2px -6px 10px #999); }
14. html 檔 css 檔 引⽤用 <link  href=”......”> 很難寫 scss 檔 好寫 好讀 ⼩小結 轉換成 （編譯 / compile） 需 ruby 和⼀一些套件 Prepros 可以搞定這些！
15. PREPROS
16. Latest version is 5.1 Still have some bugs
17. Prepros 拖曳含有檔案的資料夾 “Project” ⾃自動 *.scss --> css/*.css
18. SCSS 練習時間
19. Hello world! $color: black; .hello-world{ color: $color; }
20. 下載範例包 https://dl.dropboxusercontent.com/u/3813488/train/ hlb-scss.zip or http://bit.ly/hlb-sass
21. Variables 可以做加減乘除 variables_5.scss 顏⾊色變數有特殊 function 可以操作 color_1.scss
22. Nesting 基本 Nesting nested_1.scss “&”symbol nested_4.scss
23. @extend %placeholder 假的 Selector，名字不會出現在 CSS 裡。 extend_4.scss
24. @include @mixin 定義⼀一個 Mixin（類似函數的東⻄西） @include 來使⽤用 Mixin mixin_1.scss mixin_2.scss
25. COMPASS
26. html 檔 css 檔 引⽤用 <link  href=”......”> 很難寫 scss 檔 好寫 好讀 架構 轉換成 （編譯 / compile） compass 函式庫 @import  compass/...... 引⽤用
27. COMPASS 練習時間
28. Prepros 與 Compass Prepros 內建提供 Compass 勾選過後 要移除專案 重新新增專案
29. CSS3 @import "compass"; .box { @include border-radius(8px); @include box-shadow( rgba(#ccc, 0.5) 3px 3px 5px ); } .box { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; -moz-box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; box-shadow: rgba(204, 204, 204, 0.5) 3px 3px 5px; } css3_3.scss
30. clearfix @import "compass"; section { @include clearfix; } .evil { @include pie-clearfix; } section { overflow: hidden; *zoom: 1; } .evil { *zoom: 1; } .evil:after { content: ""; display: table; clear: both; } css3_1.scss
31. image-url 與路徑設定 http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" fonts_dir = "fonts" config.rb 勾選過後 要移除專案 重新新增專案
32. 為何要設定檔案路徑？ Compass 可以找得到檔案 產⽣生正確路徑 + cache busting： image-url() 讀取圖⽚片寬⾼高 image-width()、image-height()
33. image-width/height 找⼀一張圖⽚片來試試！
34. BOOTSTRAP-SASS
35. BOOTSTRAP 的客製化
42. 聰明些的辦法
43. 參數設定 Bootstrap 樣式 ⾃自定樣式 Bootstrap 融合 編譯（？）
44. BOOTSTRAP-SASS 需要 套件 Prepros 內建沒有裝此套件 QQ 但 Prepros 可以讓我們⽤用⾃自⼰己的套件庫！
45. 來裝 RUBY 與套件吧
46. 更多名詞 Ruby 某程式語⾔言，scss 編譯器⽤用 Ruby 寫。 .scss 需要 Ruby 才能轉換成 css。 gem Ruby 的套件管理程式
47. 安裝 Ruby (Windows) Ruby Installer ⼀一直按下⼀一步 從開始功能表找到
 Start Command Prompt with Ruby 訓練班的電腦已經裝好了 Ruby
48. 安裝 Ruby （其他OS） Mac：內建有 Ruby，⽤用內建的。 Ubuntu/Debian：推薦⽤用 rvm 安裝，但會 compile 很久 ；趕時間可以⽤用 sudo apt-get install ruby
49. 安裝套件 Windows:「開始」>「提⽰示命令字元」 Mac: Spotlight (右上⾓角放⼤大鏡) > 終端機 打「gem install compass bootstrap-sass」 安裝 compass, bootstrap-sass。
 SASS 會被⼀一併安裝。 Mac 指令前⾯面要加上 sudo
50. 範例執⾏行結果
51. 設定 Prepros 使⽤用⾃自定 Ruby Prepros 預設⽤用 Prepros ⾃自⼰己的 Ruby 我們裝的 Ruby 才有 bootstrap-sass
52. ⽤用 bootstrap-sass 開專案 打開「Start command prompt with ruby」 compass  create  專案名  -­‐r  bootstrap-­‐sass  -­‐-­‐using  bootstrap   產⽣生 _variables.scss、styles.scss 
 以及基本的⺫⽬目錄結構   ⽂文件 https://github.com/twbs/bootstrap-sass 註：Homework 3 已經做過此步驟囉！ 不 ⽤用做
53. 開新 專案 不 ⽤用做
54. _variables.scss 套⽤用下⾯面 HTML，改 _variables.scss 看效果 http://getbootstrap.com/examples/carousel/
55. 附錄：config.rb relative_assets: image_url、font_url 是否要 ⽤用相對路徑。 output_style: 四選⼀一：
 :nested, :expanded, :compact, :compressed 完整⽂文件：http://compass-style.org/help/tutorials/configuration- reference/
56. 附錄：Prepros 設定們 Sass Options > Use Compass 使⽤用 compass Sass Options > Use Compass + Full Compass Support 為了在 config.rb
 指定路徑和選項 Advanced Options > 
 Use Custom Ruby 使⽤用⾃自⼰己裝的 gem (如 bootstrap_sass)
57. 附錄：⾃自動重新整理
58. cannot load such file -- bootstrap-sass 解法： 1. 確認有指定 ruby 2. 確認有 gem install bootstrap-sass
59. 特別感謝 薛良斌前輩 (hlb) 提供 SCSS 範例 https://gist.github.com/hlb/6076665 http://iamhlb.com/about