- 簡介 這尛?為什麼?怎麼用? 這尛?為什麼?怎麼用? 這尛?為什麼?怎麼用? 這尛?為什麼?怎麼用? 這尛: 都跟樣式(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
- 好的開始是成功的一半 如果不到一半的話, 如果不到一半的話, 如果不到一半的話, 如果不到一半的話, 慢慢來,比較快。 慢慢來,比較快。 慢慢來,比較快。 慢慢來,比較快。 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 自己刻 自己刻 自己刻 自己刻
- 怎麼這麼好用! 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.
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; } }
- 關於投影片工具 因為我是好人,所以我做了一個一鍵安裝。 因為我是好人,所以我做了一個一鍵安裝。 因為我是好人,所以我做了一個一鍵安裝。 因為我是好人,所以我做了一個一鍵安裝。 $ 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
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