Mais conteúdo relacionado Semelhante a 3sss book (20) 3sss book1. S
S
3 S
csS+sasS+compasS
csS+sasS+compasS
S S S
2. 閃
我是閃光洽
洽
閃
講師的坑好大...
閃光洽
洽
民間身份是農夫,但是我絕對沒有豪華農舍。
民間身份是農夫,但是我絕對沒有豪華農舍。
http://about.me/hinablue
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
6. 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
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
10. CSSS - ...樣式表
S
如果你實在不知道什麼是 CSS...
CSSS
S
這種東西很講天份的 *
那什麼是 CSS ?
看官方文件(W3C*)。
看 W3schools* 的教學。
上 Google 搜尋 CSS*。
看我的部落格*。
我也有寫 Layout Presentation*。
* 寫過就是你的!
* W3C, CSS2
* W3schools
* Google for CSS
* HINA::工程幼稚園
* Layout Presentation
11. RT"B"
讓一切回歸到基礎之上
B
RTB 在空戰用語中,原意為 Return to base. 在此誤用一下。
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. 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. 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. 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. 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!
19. 3SS - 衝突與讓步
S
最佳切入點
SS
SPhotoshop
Dreamweaver
NotePad++
Vim
Copy & Paste
毫無頭緒
這個給 VD 做就好了
為什麼多 1px
為什麼不用 TABLE
為什麼 IE 不一樣
摻在一起做撒尿牛丸
CSS Hack
Javascript
21. 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
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. L i ve d e m o
現學現賣
i ve em o
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. 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. 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. 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 嘛!
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