3sss book

S
S
3 S
csS+sasS+compasS
csS+sasS+compasS

S S S

閃
我是閃光洽
洽
閃
講師的坑好大...

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

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

* 這不是我偏心，真的！

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

SASS
Syntactically Awesome Stylesheets

SASS

SSASS - 美妙的樣式
S
Before SASS: After SASS:
SASS 寫得更少。
SSASS
S 省去大括號與分號。 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

Compass
CSS Authoring Framework

Compass

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

CSS
Cascading Style Sheets

CSS

CSSS - ...樣式表
S
如果你實在不知道什麼是 CSS...
CSSS
S

這種東西很講天份的 *
那什麼是 CSS ?
看官方文件（W3C*）。

看 W3schools* 的教學。
上 Google 搜尋 CSS*。

看我的部落格*。

我也有寫 Layout Presentation*。

* 寫過就是你的！
* W3C, CSS2
* W3schools
* Google for CSS
* HINA::工程幼稚園
* Layout Presentation

RT"B"
讓一切回歸到基礎之上

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

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

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

我真的需要這麼做嗎？

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")

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!

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)

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！

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

3SS - 衝突與讓步
S
最佳切入點
SS
SPhotoshop
Dreamweaver
NotePad++
Vim
Copy & Paste

毫無頭緒
這個給 VD 做就好了
為什麼多 1px
為什麼不用 TABLE
為什麼 IE 不一樣

摻在一起做撒尿牛丸
CSS Hack
Javascript

Pratice is everything.
Try it, before you dismiss.

3SS - 怎麼這麼好用！
S
CSS 的基本功夫，就像下盤要穩一樣
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

Just do it!
寫就對了！

PHP?
SASS/Compass for PHP?

?

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/

L i ve d e m o
現學現賣

i ve em o

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

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/

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

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

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

總行數是 1259 行
SASS 是 545 行

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

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

Gift
See you in the PHPConf 2011@TW

Gift

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

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

References
SASS
Compass
Deck.js
HTML5 BOILERPLATE
HTML5 Presentation
SASS Presentations
Layout Presentations
[SASS note.] CSS 逆向工程 part 1
[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 Final

3sss book

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie 3sss book

Ähnlich wie 3sss book (20)

3sss book