3sss book

3333cscscscsSS

SS

SS+sas+sas+sas+sasSS

SS

SS+compas+compas+compas+compasSS

SS

SSSS

SS

SSSS

SS

SSSS

SS

SS

我是我是我是我是閃閃

閃閃

閃閃洽洽

洽洽

洽洽光光

光光

光光洽洽

洽洽

洽洽

閃閃

閃閃

閃閃

講師的坑好大...講師的坑好大...講師的坑好大...講師的坑好大...

民間身份是農夫，民間身份是農夫，但是我絕對沒有豪華農舍但是我絕對沒有豪華農舍。。http://about.me/hinabluehttp://about.me/hinablue

http://about.me/hinablue

http://phpconf.hinablue.mehttp://phpconf.hinablue.mehttp://phpconf.hinablue.mehttp://phpconf.hinablue.me請愛用 Google Chrome 瀏覽器請愛用 Google Chrome 瀏覽器請愛用 Google Chrome 瀏覽器請愛用 Google Chrome 瀏覽器

* 這不是我偏心，真的！* 這不是我偏心，真的！

http://phpconf.hinablue.me

3W33W33W33W3 - 簡介 - 簡介 - 簡介 - 簡介

這尛？為什麼？怎麼用？這尛？為什麼？怎麼用？這尛？為什麼？怎麼用？這尛？為什麼？怎麼用？

這尛: 都跟樣式（CSS）有關係。這尛: 都跟樣式（CSS）有關係。

為什麼: 寫得更少，做的更多（為什麼: 寫得更少，做的更多（）。）。

怎麼做: 怎麼做: （（）。）。

CSS, SASS, CompassCSS, SASS, CompassCSS, SASS, CompassCSS, SASS, Compass

CSS: 起碼知道除去鍊結下底線CSS: 起碼知道除去鍊結下底線**要怎麼寫。要怎麼寫。

SASS: 如果國中數學課本，或是國中數學老師還有聯絡，請翻開代數SASS: 如果國中數學課本，或是國中數學老師還有聯絡，請翻開代數**。。

Compass: 看得懂一點點英文，因為要讀官方說明Compass: 看得懂一點點英文，因為要讀官方說明**。。

簡單的方法？困難的方法？或是...簡單的方法？困難的方法？或是...簡單的方法？困難的方法？或是...簡單的方法？困難的方法？或是...

簡單的方法: 讓你的前端工程師來做。簡單的方法: 讓你的前端工程師來做。

困難的方法: 如果你是 VD+FE+PG 困難的方法: 如果你是 VD+FE+PG 全包，恭禧你（God 全包，恭禧你（God bless you.）。 bless you.）。

其他的方法？其他的方法？。。

SS

SS

SSSS

SS

SSSS

SS

SS

Write less, sleep more.Write less, sleep more.

我可以接受贊助我可以接受贊助 Donate me!Donate me!

都點滿了都點滿了 maybe notmaybe not

叫閃光洽幫你寫叫閃光洽幫你寫

* text-decoration: none;* text-decoration: none;* x = 1, y = 1, z = x + y, z = ?* x = 1, y = 1, z = x + y, z = ?

* * Compass ReferenceCompass Reference

http://compass-style.org/reference

SASSSASS

SASSSASS

SASSSASSSyntactically Awesome StylesheetsSyntactically Awesome StylesheetsSyntactically Awesome StylesheetsSyntactically Awesome Stylesheets

ASSASS

ASSASS

ASSASS - 美妙的樣式 - 美妙的樣式 - 美妙的樣式 - 美妙的樣式

SASS 寫得更少。SASS 寫得更少。SASS 寫得更少。SASS 寫得更少。

省去大括號與分號。省去大括號與分號。

同屬性、選擇器嵌套。同屬性、選擇器嵌套。

引入與擴展。引入與擴展。

SASS 做的更多！SASS 做的更多！SASS 做的更多！SASS 做的更多！

支援變數、函式呼叫。支援變數、函式呼叫。

流程控制。流程控制。

迴圈。迴圈。

引入與擴展與嵌套引入與擴展與嵌套**。。

除錯。除錯。

大量縮減選擇器的複製貼上！使用擴展嵌套大量縮減選擇器的複製貼上！使用擴展嵌套**。。

內建函式，讓操作更為便利。內建函式，讓操作更為便利。

除錯功能除錯功能**，可以，可以追蹤到底錯在哪。追蹤到底錯在哪。

多留點時間陪陪你身邊的人。多留點時間陪陪你身邊的人。多留點時間陪陪你身邊的人。多留點時間陪陪你身邊的人。

SS

SS

SSSS

SS

SSSS

SS

SS

避免死不瞑目避免死不瞑目

* 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 {{ fontfont-size: 16px-size: 16px;; fontfont-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

bodybody 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 iscolor: #{$color}"color: #{$color}"

CompassCompass

CompassCompass

CompassCompassCSS Authoring FrameworkCSS Authoring FrameworkCSS Authoring FrameworkCSS Authoring Framework

CompasCompas

CompasCompas

CompasCompas - 樣式界的神兵 - 樣式界的神兵 - 樣式界的神兵 - 樣式界的神兵

可以少打更多字。可以少打更多字。可以少打更多字。可以少打更多字。

與 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 的問題。

可以擴展更多功能可以擴展更多功能可以擴展更多功能可以擴展更多功能****

像這種按鈕像這種按鈕**

SS

SS

SSSS

SS

SSSS

SS

SS

IE MUST DIEIE MUST DIEIE MUST DIEIE MUST DIE

* SASS 可以用的 Compass 都可以用，但是 @warn 除外。* SASS 可以用的 Compass 都可以用，但是 @warn 除外。* 另外還支援 * 另外還支援 YUIYUI, , 960.gs960.gs

* IE Hack 在大多數的情況下，還是必須自己解決。* IE Hack 在大多數的情況下，還是必須自己解決。* * Compass frameworksCompass frameworks

* * Fancy buttonFancy button

Before Compass:Before Compass:

.photos .photos {{ filter:filter:progid:DXImageprogid:DXImageTransform.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: 1pxdotted gray;dotted gray; column-rulecolumn-rule: 1px: 1pxdotted gray;dotted gray;}}

After Compass:After Compass:

.photos .photos +opacity(0)+opacity(0) +column-rule(1px,+column-rule(1px,dotted, gray)dotted, gray)

https://github.com/chriseppstein/yui-compass-plugin/wiki/

https://github.com/nextmat/compass-960-plugin

http://compass-style.org/frameworks/

https://github.com/imathis/fancy-buttons

CSSCSS

CSSCSS

CSSCSSCascading Style SheetsCascading Style SheetsCascading Style SheetsCascading Style Sheets

CSCS

CSCS

CSCS - ...樣式表 - ...樣式表 - ...樣式表 - ...樣式表

如果你實在不知道什麼是 CSS...如果你實在不知道什麼是 CSS...如果你實在不知道什麼是 CSS...如果你實在不知道什麼是 CSS...

這種東西很講這種東西很講這種東西很講這種東西很講的的的的****那什麼是 CSS ?那什麼是 CSS ?那什麼是 CSS ?那什麼是 CSS ?

看官方文件（W3C看官方文件（W3C**）。）。

看 W3schools看 W3schools** 的教學。的教學。

上 Google 搜尋 CSS上 Google 搜尋 CSS**。。

看我的部落格看我的部落格**。。

我也有寫 Layout Presentation我也有寫 Layout Presentation**。。

SS

SS

SSSS

SS

SSSS

SS

SS

天份天份天份天份

* 寫過就是你的！* 寫過就是你的！* * W3C, CSS2W3C, CSS2* * W3schoolsW3schools

* * Google for CSSGoogle for CSS* * HINA::工程幼稚園HINA::工程幼稚園

* * Layout PresentationLayout Presentation

http://www.w3.org/TR/CSS2/

http://www.w3schools.com/css/

http://lmgtfy.com/?q=CSS

http://blog.hinablue.me/tag/css

http://layout.hinbalue.me

RT"RT"RT"RT"BB

BB

BB""""讓一切回歸到基礎之上讓一切回歸到基礎之上讓一切回歸到基礎之上讓一切回歸到基礎之上

RTB 在空戰用語中，原意為 Return to base. 在此誤用一下。RTB 在空戰用語中，原意為 Return to base. 在此誤用一下。

毫無章法的樣式表毫無章法的樣式表毫無章法的樣式表毫無章法的樣式表我要寫個我要寫個我要寫個我要寫個字字字字慘慘慘慘

3333 - 好的開始是成功的一半 - 好的開始是成功的一半 - 好的開始是成功的一半 - 好的開始是成功的一半

如果不到一半的話，如果不到一半的話，如果不到一半的話，如果不到一半的話，慢慢來，比較快。慢慢來，比較快。慢慢來，比較快。慢慢來，比較快。

sass-convert --from-format css --to-format sass crazy.css see-ass-or-not.sasssass-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

我真的需要這麼做嗎？我真的需要這麼做嗎？我真的需要這麼做嗎？我真的需要這麼做嗎？

SS

SS

SSSS

SS

SSSS

SS

SS

自己刻自己刻自己刻自己刻

3333 - 怎麼看待 SASS 這件事情？ - 怎麼看待 SASS 這件事情？ - 怎麼看待 SASS 這件事情？ - 怎麼看待 SASS 這件事情？

從樣式開始，從樣式結束。從樣式開始，從樣式結束。從樣式開始，從樣式結束。從樣式開始，從樣式結束。

為什麼需要 SASS 樣式？為什麼需要 SASS 樣式？為什麼需要 SASS 樣式？為什麼需要 SASS 樣式？

快速、方便、可程式化。快速、方便、可程式化。

降低共同作業的風險。降低共同作業的風險。

時勢所驅，趕流行跟著用。時勢所驅，趕流行跟著用。

SS

SS

SSSS

SS

SSSS

SS

SS

怎麼樣！想學什麼？特異功能！怎麼樣！想學什麼？特異功能！

#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-introductionintroduction 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-introductionslide-8 #first-look-sass-introduction #first-look-compass-introductionspan.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-introductionsass-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")



為什麼不用 SASS 樣式？為什麼不用 SASS 樣式？為什麼不用 SASS 樣式？為什麼不用 SASS 樣式？

我不會寫程式！我不會寫程式！

誰蓋我檔我就砍誰！誰蓋我檔我就砍誰！

我沒聽過 SASS！我沒聽過 SASS！

SS

SS

SSSS

SS

SSSS

SS

SS

很貴的！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!



可以怎麼開始？可以怎麼開始？可以怎麼開始？可以怎麼開始？

打開你熟悉的編輯器，開始寫。打開你熟悉的編輯器，開始寫。

SS

SS

SSSS

SS

SSSS

SS

SS

I I Vim. Vim.

/* Pure CSS Heart Icon with Compass/* Pure CSS Heart Icon with Compass

spanspan &.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)

3333 - 在 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！

SS

SS

SSSS

SS

SSSS

SS

SS/* Style with /* Style with CSS

CSS

CSS */ */

.two-columns {.two-columns { -moz-column-rule: 1px -moz-column-rule: 1pxdotted gray;dotted gray; -webkit-column-rule: 1px -webkit-column-rule: 1pxdotted gray;dotted gray; -o-column-rule: 1px -o-column-rule: 1pxdotted gray;dotted gray; column-rule: 1px dotted column-rule: 1px dottedgray;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 andCompassCompass

.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-columnsaside.two-columns right: 3.2em right: 3.2em width: 30em width: 30em height: 24em height: 24em +column-count(2) +column-count(2)

樣式之美樣式之美樣式之美樣式之美視覺與 Code 之間的衝突視覺與 Code 之間的衝突視覺與 Code 之間的衝突視覺與 Code 之間的衝突

3333 - 衝突與讓步 - 衝突與讓步 - 衝突與讓步 - 衝突與讓步

最佳切入點最佳切入點最佳切入點最佳切入點

Copy & PasteCopy & PasteCopy & PasteCopy & Paste

毫無頭緒毫無頭緒毫無頭緒毫無頭緒

這個給 VD 做就好了這個給 VD 做就好了這個給 VD 做就好了這個給 VD 做就好了

為什麼多 1px為什麼多 1px為什麼多 1px為什麼多 1px

為什麼不用 TABLE為什麼不用 TABLE為什麼不用 TABLE為什麼不用 TABLE

CSS HackCSS HackCSS HackCSS Hack

JavascriptJavascriptJavascriptJavascript

SS

SS

SSSS

SS

SSSS

SS

SS

PhotoshopPhotoshopPhotoshopPhotoshop

DreamweaverDreamweaverDreamweaverDreamweaver

NotePad++NotePad++NotePad++NotePad++

VimVimVimVim

為什麼 IE 不一樣為什麼 IE 不一樣為什麼 IE 不一樣為什麼 IE 不一樣

摻在一起做撒尿牛丸摻在一起做撒尿牛丸摻在一起做撒尿牛丸摻在一起做撒尿牛丸

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.

3333 - 怎麼這麼好用！ - 怎麼這麼好用！ - 怎麼這麼好用！ - 怎麼這麼好用！

CSS 的基本功夫，就像下盤要穩一樣CSS 的基本功夫，就像下盤要穩一樣CSS 的基本功夫，就像下盤要穩一樣CSS 的基本功夫，就像下盤要穩一樣

寫過就是你的寫過就是你的寫過就是你的寫過就是你的

練習才是基本王道練習才是基本王道練習才是基本王道練習才是基本王道

別人會這麼做，你會怎麼做？別人會這麼做，你會怎麼做？別人會這麼做，你會怎麼做？別人會這麼做，你會怎麼做？

我這麼做，還可以怎麼做？我這麼做，還可以怎麼做？我這麼做，還可以怎麼做？我這麼做，還可以怎麼做？

每天寫 10 行，一百天就是 1000 行每天寫 10 行，一百天就是 1000 行每天寫 10 行，一百天就是 1000 行每天寫 10 行，一百天就是 1000 行

多寫多看多問，多 Google多寫多看多問，多 Google多寫多看多問，多 Google多寫多看多問，多 Google

SS

SS

SSSS

SS

SSSS

SS

SS

HTML Code:HTML Code:

I I Vim.Vim.

Compass Code:Compass Code:

@import love_heart@import love_heart

span.love-heartspan.love-heart +love-heart(0.4em) +love-heart(0.4em)

Output:Output:

I I Vim. Vim.

Just do it!Just do it!Just do it!Just do it!寫就對了！寫就對了！寫就對了！寫就對了！

PHPPHPPHPPHP??

??

??SASS/Compass for PHP?SASS/Compass for PHP?SASS/Compass for PHP?SASS/Compass for PHP?

沒有沒有沒有沒有我是認真的我是認真的我是認真的我是認真的

3333 - 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 樣板檔副檔名。

SS

SS

SSSS

SS

SSSS

SS

SS PHPPHPPHPPHP

都說好不打臉的！都說好不打臉的！都說好不打臉的！都說好不打臉的！

* LiveReload: * LiveReload: http://livereload.com/http://livereload.com/

http://livereload.com/

LLLL d d d d現學現賣現學現賣現學現賣現學現賣

vv

vv

vvii

ii

ii ee

ee

ee mm

mm

mmee

ee

ee oo

oo

oo

3333 - 3SSS Live Demo - 3SSS Live Demo - 3SSS Live Demo - 3SSS Live Demo

這個這個這個這個其實是一個字而已。其實是一個字而已。其實是一個字而已。其實是一個字而已。

SS

SS

SSSS

SS

SSSS

SS

SS

SS

SS

SSSS

SS

SSSS

SS

SS

SS

SS

SSSS

SS

SSSS

SS

SSspan.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;}}

3333 - 關於投影片工具 - 關於投影片工具 - 關於投影片工具 - 關於投影片工具

這個投影片使用了 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，開始你的第一個投影片。

SS

SS

SSSS

SS

SSSS

SS

SS

* * http://imakewebthings.github.com/deck.js/http://imakewebthings.github.com/deck.js/* * http://html5boilerplate.com/http://html5boilerplate.com/

http://imakewebthings.github.com/deck.js/

http://html5boilerplate.com/

3333 - 關於投影片工具 - 關於投影片工具 - 關於投影片工具 - 關於投影片工具

因為我是好人，所以我做了一個一鍵安裝。因為我是好人，所以我做了一個一鍵安裝。因為我是好人，所以我做了一個一鍵安裝。因為我是好人，所以我做了一個一鍵安裝。

$ wget --no-check-certificate https://github.com/hinablue/html5-$ wget --no-check-certificate https://github.com/hinablue/html5-deckjs/raw/master/install.sh -O - | shdeckjs/raw/master/install.sh -O - | sh$ cd ~/html5-deckjs$ cd ~/html5-deckjs$ ./html5-deckjs.sh$ ./html5-deckjs.shTo 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?

SS

SS

SSSS

SS

SSSS

SS

SS

https://github.com/hinablue/html5-deckjshttps://github.com/hinablue/html5-deckjs

https://github.com/hinablue/html5-deckjs

3333 - 投影片的 SASS - 投影片的 SASS - 投影片的 SASS - 投影片的 SASS

本投影片的 SASS 檔案，當然要加入行號。本投影片的 SASS 檔案，當然要加入行號。本投影片的 SASS 檔案，當然要加入行號。本投影片的 SASS 檔案，當然要加入行號。

當然我也提供檔案下載：當然我也提供檔案下載：http://phpconf.hinbalue.me/clear-style.sass.txthttp://phpconf.hinbalue.me/clear-style.sass.txt

因為我偷用了 @import 去載入檔案，也提供下載：因為我偷用了 @import 去載入檔案，也提供下載：http://phpconf.hinbalue.me/_body_background.sass.txthttp://phpconf.hinbalue.me/_body_background.sass.txt

SS

SS

SSSS

SS

SSSS

SS

SS

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 嘛！

/clear-style.sass.txt

/_body_background.sass.txt

本投影片的 CSS...本投影片的 CSS...本投影片的 CSS...本投影片的 CSS...不會有人真的想看吧不會有人真的想看吧不會有人真的想看吧不會有人真的想看吧

總行數是 1259 行總行數是 1259 行總行數是 1259 行總行數是 1259 行SASS 是 545 行SASS 是 545 行SASS 是 545 行SASS 是 545 行

歡迎複製貼上歡迎複製貼上歡迎複製貼上歡迎複製貼上因為我是因為我是因為我是因為我是好人好人好人好人

網頁設計是種藝術網頁設計是種藝術網頁設計是種藝術網頁設計是種藝術請相信自己的專業請相信自己的專業請相信自己的專業請相信自己的專業

Q & Q &

Q & Q &

Q & Q & 謝謝大家謝謝大家謝謝大家謝謝大家

AA

AA

AA

GiftGift

GiftGift

GiftGiftSee you in the PHPConf 2011@TWSee you in the PHPConf 2011@TWSee you in the PHPConf 2011@TWSee you in the PHPConf 2011@TW

_special.sass_special.sass

_special.sass_special.sass

_special.sass_special.sass本投影片所有過場特效工具本投影片所有過場特效工具本投影片所有過場特效工具本投影片所有過場特效工具

* 我的投影片工具就偷偷幫你放進去了。* 我的投影片工具就偷偷幫你放進去了。

https://github.com/hinablue/html5-deckjs/blob/master/sample/_special.sass

ReferencesReferencesReferencesReferences

SASSSASS

CompassCompass

Deck.jsDeck.js

HTML5 BOILERPLATEHTML5 BOILERPLATE

HTML5 PresentationHTML5 Presentation

SASS PresentationsSASS Presentations

Layout PresentationsLayout Presentations

[SASS note.] CSS 逆向工程 part 1[SASS note.] CSS 逆向工程 part 1



[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 Final[Layout tech.] Web Design note with XHTML/CSS Final

http://sass-lang.com

http://compass-style.org/

http://imakewebthings.github.com/deck.js

http://html5boilerplate.com/

http://slides.html5rocks.com/

http://sass.hinbalue.me

http://layout.hinbalue.me

http://blog.hinablue.me/entry/sass-note-css-reversed-engineering-part-1



http://blog.hinablue.me/entry/css-note-sass-del-say-a-sexy-styling-del

http://blog.hinablue.me/entry/css-note-powerful-tool-compass-base-on-sass

http://blog.hinablue.me/entry/working_note_about_web_design_xhtml_and_css

http://blog.hinablue.me/entry/working_note_about_web_design_xhtml_and_css_part_2



http://blog.hinablue.me/entry/working_note_about_web_design_xhtml_and_css_part_final