3sss book

882 views

Published on

PHPConf @ Taiwan, 2011. CSS/SASS/Compass Presentation.

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
882
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3sss book

  1. 1. S S 3 ScsS+sasS+compasScsS+sasS+compasS S S S
  2. 2. 閃我是閃光洽 洽 閃講師的坑好大... 閃光洽 洽 民間身份是農夫,但是我絕對沒有豪華農舍。 民間身份是農夫,但是我絕對沒有豪華農舍。 http://about.me/hinablue
  3. 3. http://phpconf.hinablue.me 請愛用 Google Chrome 瀏覽器 * 這不是我偏心,真的!
  4. 4. 3W3SS - 簡介 S這尛?為什麼?怎麼用? SS S 這尛: 都跟樣式(CSS)有關係。 為什麼: 寫得更少,做的更多(Write less, sleep more.)。 怎麼做: 我可以接受贊助(Donate me!)。CSS, SASS, Compass CSS: 起碼知道除去鍊結下底線*要怎麼寫。 SASS: 如果國中數學課本,或是國中數學老師還有聯絡,請翻開代數*。 Compass: 看得懂一點點英文,因為要讀官方說明*。簡單的方法?困難的方法?或是... 簡單的方法: 讓你的前端工程師來做。 困難的方法: 如果你是 VD+FE+PG 都點滿了全包,恭禧你(God maybe not bless you.)。 其他的方法?叫閃光洽幫你寫。 * text-decoration: none; * x = 1, y = 1, z = x + y, z = ? * Compass Reference
  5. 5. SASSSyntactically Awesome Stylesheets SASS
  6. 6. SSASS - 美妙的樣式S Before SASS: After SASS: SASS 寫得更少。SSASSS 省去大括號與分號。 body { font-size: 16px; font-size: 16px ; $color: #333333 同屬性、選擇器嵌套。 font-family: serif; font-family: serif; body color: #333333; #333333; font: 引入與擴展。 } size: 16px family: serif .header { color: $color SASS 做的更多! color: #333333; #333333; 支援變數、函式呼叫。 } .header color: $color 流程控制。 .header:hover .header:hover { &:hover 迴圈。 color: #666666; #666666; color: lighten($color, } 20%) 引入與擴展與嵌套*。 @warn "There is color: #{$color}" 除錯。 @debug "There is color: #{$color}" 大量縮減選擇器的複製貼上!使用擴展嵌套*。 內建函式,讓操作更為便利。 除錯功能*,可以避免死不瞑目追蹤到底錯在哪。多留點時間陪陪你身邊的人。 * Import, include, nested property and extend. * @extend and nested property. * @debug, @warn
  7. 7. Compass CSS Authoring FrameworkCompass
  8. 8. CompasSS - 樣式界的神兵 S Before Compass: After Compass:可以少打更多字。CompasSS *。S與 SASS 相似的撰寫風格 .photos { .photos filter: +opacity(0)跨瀏覽器支援,IE MUST DIE。 progid:DXImage +column-rule(1px, Transform. dotted, gray)支援更多 CSS Framework,預設 CSS3, Blueprint *。 Microsoft. Alpha(Opacity=0);支援部份 IE Hack *,也可以解決部份 hasLayout 的問題。 opacity: 0; -moz-column-rule: -moz-column-rule:可以擴展更多功能* 1px dotted gray; -webkit-column-rule: -webkit-column-rule: 1px dotted gray; -o-column-rule: -o-column-rule: 1px 像這種按鈕* dotted gray; column-rule: column-rule: 1px dotted gray; } * SASS 可以用的 Compass 都可以用,但是 @warn 除外。 * 另外還支援 YUI, 960.gs YUI, * IE Hack 在大多數的情況下,還是必須自己解決。 * Compass frameworks * Fancy button
  9. 9. CSSCascading Style Sheets CSS
  10. 10. CSSS - ...樣式表 S如果你實在不知道什麼是 CSS...CSSS S這種東西很講天份的 *那什麼是 CSS ? 看官方文件(W3C*)。 看 W3schools* 的教學。 上 Google 搜尋 CSS*。 看我的部落格*。 我也有寫 Layout Presentation*。 * 寫過就是你的! * W3C, CSS2 * W3schools * Google for CSS * HINA::工程幼稚園 * Layout Presentation
  11. 11. RT"B" 讓一切回歸到基礎之上 BRTB 在空戰用語中,原意為 Return to base. 在此誤用一下。
  12. 12. 毫無章法的樣式表 我要寫個慘字
  13. 13. 3SS - 好的開始是成功的一半 S如果不到一半的話,自己刻慢慢來,比較快。 SS S sass-convert --from-format css --to-format sass crazy.css see-ass-or-not.sass如果轉換後 SASS 不至於變成 ASS 的話... 注意屬性、選擇器使用引用、嵌套的陷阱。 .thanks-god >.i-am-not-working-shit-today @import "sass-still-alive" .thanks-my-love @extend .sass-still-alive >.i-am-not-working-shit-today @extend .sass-still-alive我真的需要這麼做嗎?
  14. 14. 3SS - 怎麼看待 SASS 這件事情? S從樣式開始,從樣式結束。 SS S為什麼需要 SASS 樣式? #first-look-compass-introduction .span-on-the-fly, #first-look-compass- introduction .on-slide-8 #first-look-sass-introduction span.sass-brackets, .on- slide-8 #first-look-sass-introduction #first-look-compass-introduction span.sass- brackets, #first-look-compass-introduction .on-slide-8 #first-look-sass- 快速、方便、可程式化。 introduction span.sass-semicolon, .on-slide-8 #first-look-sass-introduction #first-look-compass-introduction span.sass-semicolon, #first-look-compass- 降低共同作業的風險。 introduction .on-slide-8 #first-look-sass-introduction span.nested-property, .on- slide-8 #first-look-sass-introduction #first-look-compass-introduction 時勢所驅,趕流行跟著用。 span.nested-property, #first-look-compass-introduction .on-slide-9 #first-look- sass-introduction span.sass-variables, .on-slide-9 #first-look-sass-introduction 怎麼樣!想學什麼?特異功能! #first-look-compass-introduction span.sass-variables, #first-look-compass- introduction .on-slide-10 #first-look-sass-introduction span.nested-selector { color: red; background-color: #ffff66; text-shadow: red 0px 0px 1px; } 生命應該浪費在美好事物上! @include on-slide-hide(8, all) @include on-slide-hide(9, 2) @include focus-on-slide(9, "span.sass-brackets" "span.sass-semicolon" "span.nested-property") @include on-slide-show(10, last) +focus-on-slide(10, "span.sass-variables")
  15. 15. 3SS - 怎麼看待 SASS 這件事情? S從樣式開始,從樣式結束。 SS S為什麼不用 SASS 樣式? 這是 VD 寫的 .style-01 { 我不會寫程式! background: white; } 誰蓋我檔我就砍誰! 這是 PG 寫的 我沒聽過 SASS! 很貴的!20 塊! .style-01 { background: url(./images/background.jpg) top left no-repeat white; } 這是 FE 寫的 .background { background-image: url(./images/background.jpg); background-position: top left; background-repeat: no-repeat; background-color: white; } 綜合 VD+PG+FE 的結果 WTF!
  16. 16. 3SS - 怎麼看待 SASS 這件事情? S從樣式開始,從樣式結束。 SS S可以怎麼開始? I Vim. 打開你熟悉的編輯器,開始寫。 /* Pure CSS Heart Icon with Compass span &.love-heart display: inline-block background-color: transparent position: relative width: $heart_size * 2.8 height: $heart_size * 3 margin: 0px $heart_size * 0.35 &:after content: "" position: absolute left: $heart_size * -0.5 background-color: red width: $heart_size * 0.96 * 0.667 height: $heart_size * 1.98 border: $heart_size solid red +border-top-left-radius($heart_size*2) +border-top-right-radius($heart_size*2) +rotate(-45deg) &:before @extend span.love-heart:after left: $heart_size * 0.5 +rotate(45deg)
  17. 17. 3SS - 在 3 個 S 之間 S /* Style with CSS */ /* Style with SASS and SASS → CSS 看起來很像,但不太一樣。 SSSASS 以縮排為基準。 S .two-columnsCSS{ -moz-column-rule: 1px Compass .two-columns SASS SASS 屬性語法與 CSS 完全相同。 SASS dotted gray; @include column-rule(1px, -webkit-column-rule: 1px dotted, gray) SASS 引用與嵌套會影響 CSS 輸出結果。 SASS dotted gray; position: absolute SASS 不容易讀出實際屬性權重。 -o-column-rule: 1px top: 6em SASS dotted gray; SASS column-rule: 1px dotted aside.two-columns CSS → SASS 逆向操作。 gray; right: 3.2em position: absolute; width: 30em CSS 原有選擇器會被拆開。 top: 6em; } height: 24em CSS 屬性語法與值不會被更動。 +column-count(2) CSS aside.two-columns { CSS 產出的 SASS 檔案未必比原本來的小。 CSS right: 3.2em; CSS 逆向後可讀性不如原本的樣式。 width: 30em; CSS height: 24em; CSS -moz-column-count: 2; Compass → CSS 個人實在不建議逆向操作! -webkit-column-count: 2; -o-column-count: 2; 強大的工具。 column-count: 2; } 強大的工具。 強大的工具。 產出的 CSS 可修改,但不建議還原成 SASS/SCSS!
  18. 18. 樣式之美視覺與 Code 之間的衝突
  19. 19. 3SS - 衝突與讓步 S最佳切入點SSSPhotoshop Dreamweaver NotePad++ Vim Copy & Paste毫無頭緒 這個給 VD 做就好了 為什麼多 1px 為什麼不用 TABLE 為什麼 IE 不一樣摻在一起做撒尿牛丸 CSS Hack Javascript
  20. 20. Pratice is everything. Try it, before you dismiss.
  21. 21. 3SS - 怎麼這麼好用! SCSS 的基本功夫,就像下盤要穩一樣 SS S寫過就是你的練習才是基本王道別人會這麼做,你會怎麼做?我這麼做,還可以怎麼做?HTML Code: Compass Code: Output:<p>I <span class="love-heart"></span> @import love_heart I Vim.Vim.</p> span.love-heart +love-heart(0.4em)每天寫 10 行,一百天就是 1000 行多寫多看多問,多 Google
  22. 22. Just do it! 寫就對了!
  23. 23. PHP?SASS/Compass for PHP? ?
  24. 24. 沒有我是認真的
  25. 25. 3SS - SASS/Compass for PHP Ruby S因為 SASS/Compass 都是基於 Ruby 而來,所以... SS S $ sudo apt-get update && sudo apt-get upgrade $ sudo apt-get install ruby 都說好不打臉的! 如果只是個人用開發,是不需要佈署 Ruby 環境在正式站上。 我也可以將他佈署到 CakePHP 裡面! $ cake bake project my_project $ cd my_project/webroot $ compass create my_sass -x sass $ ln -s my_sass/stylesheets css 如果你有安裝 livereload*,可以修改 .livereload 檔案,加入 CakePHP 的 .ctp 樣板檔副檔名。 * LiveReload: http://livereload.com/
  26. 26. L i ve d e m o 現學現賣 i ve em o
  27. 27. 3SS - 3SSS Live Demo S這個 SS 其實是一個字而已。 S SS S SS S span.special-sss:after { content: "S"; display: inline-block; color: rgba(255, 255, 255, 0.9); SS S position: absolute; left: 0.5em; top: 0px; text-shadow: gray 0px 0px 2px; } span.special-sss { display: inline-block; color: rgba(255, 51, 153, 0.8); position: relative; margin-right: 0.5em; text-shadow: gray 0px 0px 2px; } span.special-sss:before { content: "S"; display: inline-block; color: rgba(102, 255, 51, 0.8); position: absolute; left: 0.25em; top: 0px; text-shadow: gray 0px 0px 2px; }
  28. 28. 3SS - 關於投影片工具 S這個投影片使用了 Deck.js*, HTML5-boilerplate* 製作。 SS S $ git clone git://github.com/imakewebthings/deck.js.git $ git clone git://github.com/paulirish/html5-boilerplate.git $ compass create my_persentation -x sass $ cd ./my_persentation $ cp -r ../html5-boilerplate/* ./ && rm -rf .git $ cp -r ../deck.js ./js/mylibs/ 使用我整理過的 index.html,你想自己做也可以,當然我佛心的提供了預設的 sass 檔案。 $ fetch http://phpconf.hinablue.me/_index.html $ mv index.html index.html.old && mv _index.html index.html $ cd sass && fetch http://phpconf.hinablue.me/sample.sass && cd ../ $ compass watch --no-line-comments & $ livereload & 開始編輯 index.html 與 sass/sample.sass,開始你的第一個投影片。 * http://imakewebthings.github.com/deck.js/ * http://html5boilerplate.com/
  29. 29. 3SS - 關於投影片工具 S因為我是好人,所以我做了一個一鍵安裝。 SS S $ wget --no-check-certificate https://github.com/hinablue/html5- deckjs/raw/master/install.sh -O - | sh $ cd ~/html5-deckjs $ ./html5-deckjs.sh To create a new project, enter a new directory name: _ Do you trust me? https://github.com/hinablue/html5-deckjs
  30. 30. 3SS - 投影片的 SASS S本投影片的 SASS 檔案,當然要加入行號。 SS1 @import compass/css3 S 2 @import compass/reset 3 @import compass/layout 4 @import compass/typography 5 @import compass/utilities 6 7 @import fancy-buttons 8 @import body_background 9 @import special 10 11 $font_size: 18px 12 $wall_width: 80% 13 $wall_height: 700px 14 $font_color: rgb(180,180,180) 15 $min_height: $font_size * 2 16 $line_height: $font_size * 1.2 17 $sass_color: rgba(#ff3399, .8) 18 $compass_color: rgba(white, .9) 19 $css_color: rgba(#66ff33, .9)當然我也提供檔案下載:http://phpconf.hinbalue.me/clear-style.sass.txt當然我也提供檔案下載:http://phpconf.hinbalue.me/clear-style.sass.txt因為我偷用了 @import 去載入檔案,也提供下載:http://phpconf.hinbalue.me/_body_background.sass.txt 去載入檔案,也提供下載:http://phpconf.hinbalue.me/_body_background.sass.txt 當然字一定還要是綠色的,這樣才夠 Geek 嘛!
  31. 31. 本投影片的 CSS... 不會有人真的想看吧
  32. 32. 總行數是 1259 行 SASS 是 545 行
  33. 33. 歡迎複製貼上 因為我是好人 因為我是好人
  34. 34. 網頁設計是種藝術 請相信自己的專業
  35. 35. Q&A謝謝大家Q&A
  36. 36. GiftSee you in the PHPConf 2011@TW Gift
  37. 37. _special.sass 本投影片所有過場特效工具_special.sass * 我的投影片工具就偷偷幫你放進去了。
  38. 38. References SASS Compass Deck.js HTML5 BOILERPLATE HTML5 Presentation SASS Presentations Layout Presentations [SASS note.] CSS 逆向工程 part 1 [SASS note.] CSS 逆向工程 part 2 [SASS note.] CSS 逆向工程 part 3 [CSS note.] SASS - Say a sexy styling(刪除線) [CSS note.] 強大的 Compass 來產出 CSS [Layout tech.] Web Design note with XHTML/CSS [Layout tech.] Web Design note with XHTML/CSS Part 2 [Layout tech.] Web Design note with XHTML/CSS Part 3 [Layout tech.] Web Design note with XHTML/CSS Part 4 [Layout tech.] Web Design note with XHTML/CSS Final

×