Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3SSS Presentation

Cain Chen
November 12, 2011

3SSS Presentation

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

Cain Chen

November 12, 2011
Tweet

More Decks by Cain Chen

Other Decks in Design

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

    View full-size slide

  2. 我是
    我是
    我是
    我是閃




    閃 洽























    講師的坑好大...
    講師的坑好大...
    講師的坑好大...
    講師的坑好大...
    民間身份是農夫,
    民間身份是農夫,但是我絕對沒有豪華農舍
    但是我絕對沒有豪華農舍。

    http://about.me/hinablue
    http://about.me/hinablue

    View full-size slide

  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 瀏覽器
    * 這不是我偏心,真的!
    * 這不是我偏心,真的!

    View full-size slide

  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

    View full-size slide

  5. SASS
    SASS
    SASS
    SASS
    SASS
    SASS
    Syntactically Awesome Stylesheets
    Syntactically Awesome Stylesheets
    Syntactically Awesome Stylesheets
    Syntactically Awesome Stylesheets

    View full-size slide

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

    View full-size slide

  7. Compass
    Compass
    Compass
    Compass
    Compass
    Compass
    CSS Authoring Framework
    CSS Authoring Framework
    CSS Authoring Framework
    CSS Authoring Framework

    View full-size slide

  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)

    View full-size slide

  9. CSS
    CSS
    CSS
    CSS
    CSS
    CSS
    Cascading Style Sheets
    Cascading Style Sheets
    Cascading Style Sheets
    Cascading Style Sheets

    View full-size slide

  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

    View full-size slide

  11. RT"
    RT"
    RT"
    RT"B
    B
    B
    B
    B
    B"
    "
    "
    "
    讓一切回歸到基礎之上
    讓一切回歸到基礎之上
    讓一切回歸到基礎之上
    讓一切回歸到基礎之上
    RTB 在空戰用語中,原意為 Return to base. 在此誤用一下。
    RTB 在空戰用語中,原意為 Return to base. 在此誤用一下。

    View full-size slide

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







    View full-size slide

  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
    自己刻
    自己刻
    自己刻
    自己刻

    View full-size slide

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

    View full-size slide

  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!

    View full-size slide

  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)

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

  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 不一樣
    摻在一起做撒尿牛丸
    摻在一起做撒尿牛丸
    摻在一起做撒尿牛丸
    摻在一起做撒尿牛丸

    View full-size slide

  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.

    View full-size slide

  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:
    I
    I
    Vim.
    Vim.
    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.

    View full-size slide

  22. Just do it!
    Just do it!
    Just do it!
    Just do it!
    寫就對了!
    寫就對了!
    寫就對了!
    寫就對了!

    View full-size slide

  23. PHP
    PHP
    PHP
    PHP?
    ?
    ?
    ?
    ?
    ?
    SASS/Compass for PHP?
    SASS/Compass for PHP?
    SASS/Compass for PHP?
    SASS/Compass for PHP?

    View full-size slide

  24. 沒有
    沒有
    沒有
    沒有
    我是認真的
    我是認真的
    我是認真的
    我是認真的

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 總行數是 1259 行
    總行數是 1259 行
    總行數是 1259 行
    總行數是 1259 行
    SASS 是 545 行
    SASS 是 545 行
    SASS 是 545 行
    SASS 是 545 行

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Q &
    Q &
    Q &
    Q &
    Q &
    Q &
    謝謝大家
    謝謝大家
    謝謝大家
    謝謝大家
    A
    A
    A
    A
    A
    A

    View full-size slide

  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

    View full-size slide

  37. _special.sass
    _special.sass
    _special.sass
    _special.sass
    _special.sass
    _special.sass
    本投影片所有過場特效工具
    本投影片所有過場特效工具
    本投影片所有過場特效工具
    本投影片所有過場特效工具
    * 我的投影片工具就偷偷幫你放進去了。
    * 我的投影片工具就偷偷幫你放進去了。

    View full-size slide

  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

    View full-size slide