3SSS Presentation

CSS/SASS/Compass presentation in the PHPConf in Taiwan 2011.

Transcript

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