3SSS

csS+sasS+compasS

我是

講師的坑好大...

http://phpconf.hinablue.me

請愛用 Google Chrome 瀏覽器

* 這不是我偏心,真的!

3W3S - 簡介

這尛?為什麼?怎麼用?

  • 這尛: 都跟樣式(CSS)有關係。
  • 為什麼: 寫得更少,做的更多(Write less, sleep more.)。
  • 怎麼做: 我可以接受贊助Donate me!)。

CSS, SASS, Compass

  • CSS: 起碼知道除去鍊結下底線*要怎麼寫。
  • SASS: 如果國中數學課本,或是國中數學老師還有聯絡,請翻開代數*
  • Compass: 看得懂一點點英文,因為要讀官方說明*

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

  • 簡單的方法: 讓你的前端工程師來做。
  • 困難的方法: 如果你是 VD+FE+PG 都點滿了全包,恭禧你(God maybe not bless you.)。
  • 其他的方法?叫閃光洽幫你寫

SASS

Syntactically Awesome Stylesheets

SASS - 美妙的樣式

  • SASS 寫得更少。
    • 省去大括號與分號。
    • 同屬性、選擇器嵌套。
    • 引入與擴展。
  • SASS 做的更多!
    • 支援變數、函式呼叫。
    • 流程控制。
    • 迴圈。
    • 引入與擴展與嵌套*
    • 除錯。
  • 大量縮減選擇器的複製貼上!使用擴展嵌套*
  • 內建函式,讓操作更為便利。
  • 除錯功能*,可以避免死不瞑目追蹤到底錯在哪。

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

* Import, include, nested property and extend.

* @extend and nested property.

* @debug, @warn

Compass

CSS Authoring Framework

CompasS - 樣式界的神兵

可以少打更多字。
與 SASS 相似的撰寫風格*
跨瀏覽器支援,IE MUST DIE
支援更多 CSS Framework,預設 CSS3, Blueprint*
支援部份 IE Hack*,也可以解決部份 hasLayout 的問題。
可以擴展更多功能*

* SASS 可以用的 Compass 都可以用,但是 @warn 除外。

* 另外還支援 YUI, 960.gs

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

* Compass frameworks

* Fancy button

CSS

Cascading Style Sheets

CSS - ...樣式表

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

這種東西很講天份*

那什麼是 CSS ?

  • 看官方文件(W3C*)。
  • 看 W3schools* 的教學。
  • 上 Google 搜尋 CSS*
  • 看我的部落格*
  • 我也有寫 Layout Presentation*

RT"B"

讓一切回歸到基礎之上

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

毫無章法的樣式表

我要寫個

3S - 好的開始是成功的一半

如果不到一半的話,自己刻慢慢來,比較快。

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

我真的需要這麼做嗎?

3S - 怎麼看待 SASS 這件事情?

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

  • 為什麼需要 SASS 樣式?
    • 快速、方便、可程式化。
    • 降低共同作業的風險。
    • 時勢所驅,趕流行跟著用。
    • 怎麼樣!想學什麼?特異功能!
  • 為什麼不用 SASS 樣式?
    • 我不會寫程式!
    • 誰蓋我檔我就砍誰!
    • 我沒聽過 SASS!
    • 很貴的!20 塊!
  • 可以怎麼開始?
    • 打開你熟悉的編輯器,開始寫。

3S - 在 3 個 S 之間

  • SASS → CSS 看起來很像,但不太一樣。
    • SASS 以縮排為基準。
    • SASS 屬性語法與 CSS 完全相同。
    • SASS 引用與嵌套會影響 CSS 輸出結果。
    • SASS 不容易讀出實際屬性權重。
  • CSS → SASS 逆向操作。
    • CSS 原有選擇器會被拆開。
    • CSS 屬性語法與值不會被更動。
    • CSS 產出的 SASS 檔案未必比原本來的小。
    • CSS 逆向後可讀性不如原本的樣式。
  • Compass → CSS 個人實在不建議逆向操作!
    • 強大的工具。
    • 強大的工具。
    • 強大的工具。
    • 產出的 CSS 可修改,但不建議還原成 SASS/SCSS!

樣式之美

視覺與 Code 之間的衝突

3S - 衝突與讓步

最佳切入點

  • Photoshop
  • Dreamweaver
  • NotePad++
  • Vim
  • Copy & Paste 

毫無頭緒

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

摻在一起做撒尿牛丸

  • CSS Hack
  • Javascript

Pratice is everything.

Try it, before you dismiss.

3S - 怎麼這麼好用!

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

寫過就是你的 

練習才是基本王道 

別人會這麼做,你會怎麼做?

我這麼做,還可以怎麼做?

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

多寫多看多問,多 Google 

Just do it!

寫就對了!

PHP?

SASS/Compass for PHP?

沒有

我是認真的

3S - SASS/Compass for PHP Ruby

因為 SASS/Compass 都是基於 Ruby 而來,所以...

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

Lv   dm

現學現賣

3S - 3SSS Live Demo

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

S

span.special-sss:after {
    content: "S"; display: inline-block; color: rgba(255, 255, 255, 0.9);
    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;
}

3S - 關於投影片工具

這個投影片使用了 Deck.js*, HTML5-boilerplate* 製作。

  • $ 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,開始你的第一個投影片。

3S - 關於投影片工具

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

  • $ 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?

3S - 投影片的 SASS

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

     1	@import compass/css3
     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)
    20	$gray_color: rgba(#333333, .8)
    21	$light_green: #1c77ff
    22	$heart_size: $font_size * 0.85
    23	
    24	$mono_font: "Monaco"
    25	
    26	$default-text-shadow-color: rgba(#333333, .6)
    27	$default-text-shadow-blur: 3px
    28	$default-text-shadow-v-offset: 3px
    29	
    30	body 
    31	  font: #{$font_size}/1.0 "Sans", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif
    32	  line-height: 1em
    33	  margin: 0
    34	  padding: 0
    35	  overflow: hidden
    36	  color: $font_color
    37	  line-height: $line_height
    38	  +single-text-shadow(gray, 0px, 0px, 2px)
    39	
    40	.touch body 
    41	  -webkit-text-size-adjust: none
    42	a, a:visited, a:link
    43	  text-decoration: none
    44	a:hover
    45	  color: $sass_color
    46	.sass
    47	  color: $sass_color
    48	.compass
    49	  color: $compass_color
    50	.css
    51	  color: $css_color
    52	.var
    53	  color: $light_green
    54	.justify
    55	  text-align: justify
    56	.two-columns
    57	  @include column-rule(1px, dotted, gray)
    58	  +column-count(2)
    59	  font-family: $mono_font
    60	  position: absolute
    61	  top: 6em
    62	  right: 3.2em
    63	.threed-transform-switcher
    64	  +opacity(0)
    65	  +rotate3d(-2,-3,-1, 45deg)
    66	code > pre
    67	  background-color: rgba(255,200,255,0.5)
    68	  color: black
    69	  font-size: 0.92em
    70	  +border-radius(5px)
    71	
    72	.presentation
    73	  > header 
    74	    width: 100%
    75	    height: auto
    76	    background: rgba(0,0,0, .8)
    77	    overflow: hidden
    78	    position: relative
    79	    z-index: 4
    80	    h1
    81	      font-size: 1.2em
    82	      padding: .4em 
    83	      a, a:visited, a:link
    84	        color: white
    85	  > footer
    86	    position: fixed
    87	    bottom: 0
    88	    left: 0
    89	    width: 100%
    90	    height: $line_height
    91	    line-height: $line_height
    92	    font-size: .5em
    93	    z-index: 4
    94	    > p
    95	      float: right
    96	      margin-right: 10px
    97	      padding: 0 4px
    98	      background: white
    99	      > a
   100	        color: $light_green
   101	  .deck-container
   102	    width: $wall_width
   103	    margin: 16px auto 16px auto
   104	    height: $wall_height
   105	    font-size: $font_size
   106	    overflow: hidden
   107	    .slide 
   108	      position: relative
   109	      overflow: hidden
   110	      >hgroup
   111	        >h1:first-child
   112	          font:
   113	            size: 5em
   114	          +single-text-shadow(gray, 2px, 2px, 5px)
   115	          &.large
   116	            font-size: 8em
   117	        >h1:last-child
   118	          font:
   119	            size: 2em
   120	          padding-top: 5.8em
   121	          +single-text-shadow(gray, 0px, 0px, 3px)
   122	      footer
   123	        position: absolute
   124	        bottom: 0
   125	        left: 0
   126	        right: 0
   127	        >p
   128	          text-align: center
   129	          font-size: .92em
   130	          line-height: 1em
   131	          margin: 0.25em
   132	          padding: 0
   133	          color: gray
   134	      &.threed-transform
   135	        +single-box-shadow(gray, 0px, 0px, 200px)
   136	        &.deck-previous:not(.deck-child-current), 
   137	        &.deck-next:not(.deck-child-current), 
   138	        &.deck-after:not(.deck-child-current), 
   139	        &.deck-before:not(.deck-child-current)
   140	          @extend .threed-transform-switcher
   141	        &.deck-child-current, &.deck-current
   142	          top: 0px
   143	          -webkit-transition: all 0.8s cubic-bezier(.91,.25,.29,.95)
   144	          -moz-transition: all 0.8s cubic-bezier(.91,.25.29.95)
   145	          +opacity(1)
   146	
   147	span
   148	  &.love-heart
   149	    +loveheart($heart_size)
   150	  &.important-strong
   151	    font-weight: 700
   152	    color: red
   153	  &.check
   154	    display: inline-block
   155	    position: relative
   156	    top: -0.35em
   157	    border: 0
   158	    width: 1em
   159	    height: 0.5em
   160	    margin: 0 0 0 0.5em
   161	    border-left: 0.35em solid lighten(green, 10%)
   162	    border-bottom: 0.35em solid lighten(green, 10%)
   163	    +rotateZ(-45deg)
   164	  &.strike
   165	    display: inline-block
   166	    position: relative
   167	    &:after
   168	      content: ""
   169	      display: inline-block
   170	      height: 0.125em
   171	      position: absolute
   172	      left: 0
   173	      right: 0
   174	      top: 0.575em
   175	      background-color: darken(white, 80%)
   176	      +single-box-shadow(gray, 0px, 0px, 0.2em)
   177	  &.cross-strike
   178	    @extend span.strike
   179	    &:after
   180	      background-color: white
   181	      +rotate(22.5deg)
   182	    &:before
   183	      @extend span.strike:after
   184	      background-color: white
   185	      +rotate(337.5deg)
   186	  &.star-tip
   187	    vertical-align: super
   188	  &.special-3s
   189	    display: inline-block
   190	    color: $sass_color
   191	    position: relative
   192	    margin-right: .5em
   193	    +single-text-shadow(gray, 0px, 0px, 2px)
   194	    &:after
   195	      content: "S"
   196	      display: inline-block
   197	      color: $compass_color
   198	      position: absolute
   199	      left: .5em
   200	      top: 0px
   201	      +single-text-shadow(gray, 0px, 0px, 2px)
   202	    &:before
   203	      content: "S"
   204	      display: inline-block 
   205	      color: $css_color 
   206	      position: absolute
   207	      left: .25em
   208	      top: 0px
   209	      +single-text-shadow(gray, 0px, 0px, 2px)
   210	
   211	/* Fancy button
   212	=custom-fancy-gradient($color1, $color2)
   213	  +background-image(radial-gradient(50% 10%, $color1, darken($color2, 5) 30px))
   214	
   215	.fancy-button-base
   216	  +fancy-button
   217	  margin: 0 2px
   218	  vertical-align: middle
   219	
   220	button.fancy-button
   221	  @extend .fancy-button-base
   222	  +fancy-button-colors-custom(saturate(lighten(red, 2), 20))
   223	  font-size: 2em
   224	
   225	/* Startup
   226	@-webkit-keyframes movingbox
   227	  0%
   228	    font-size: 1em
   229	    top: -0.25em
   230	  35%
   231	    +rotate3d(1,1,-2)
   232	  50%
   233	    font-size: 2.5em
   234	    margin-left: 0.2em
   235	    top: -0.5em
   236	    +single-text-shadow(gray, 0px, 0px, 1em)
   237	  65%
   238	    +rotate3d(1,-2,1)
   239	  100%
   240	    font-size: 1em
   241	    top: -0.25em
   242	
   243	#startup 
   244	  hgroup
   245	    >h1
   246	      >span.animate-styling
   247	        display: block
   248	        position: absolute
   249	        top: -0.25em
   250	        left: 53%
   251	        -webkit-animation: movingbox 12s infinite
   252	      >span.animate-css
   253	        padding: 0.25em 0.25em
   254	      >span.animate-sass
   255	        padding: 0.125em 0.125em
   256	
   257	/* Author
   258	#author 
   259	  hgroup 
   260	    >h1>.name-special
   261	      display: inline-block 
   262	      position: relative
   263	      color: $compass_color
   264	      +single-text-shadow(gray, 0px, 0px, 2px)
   265	      &:after
   266	        display: inline-block 
   267	        position: absolute
   268	        content: "閃"
   269	        top: -1em
   270	        left: 0
   271	        color: $sass_color
   272	      &:before
   273	        display: inline-block
   274	        position: absolute 
   275	        content: "洽"
   276	        top: 1em
   277	        left: 0
   278	        color: $css_color
   279	    >h1:last-child
   280	      position: relative
   281	      left: -2.4em
   282	      top: 10.2em
   283	/* Presentation Website
   284	#presentation-on-web
   285	  hgroup
   286	    h1:first-child
   287	      font-size: 4em
   288	
   289	/* On slide focus effect
   290	.span-on-the-fly
   291	  color: red
   292	  background-color: lighten(yellow, 20%)
   293	  +single-text-shadow(red, 0px, 0px, 1px)
   294	
   295	/* Introduction
   296	$on-slide-parent: "#introduction"
   297	@for $i from 1 through 3
   298	  $real_key: 4 5 6
   299	  $what: what why how
   300	  $way: easy hard other
   301	  .on-slide-#{nth($real_key, $i)} #introduction-#{nth($what, $i)}, 
   302	  .on-slide-#{nth($real_key, $i)} #introduction-#{nth($way, $i)}-way,
   303	    +single-transition('opacity', 1s, linear, 0.5s)
   304	  +on-slide-show($i+4, $i)
   305	  @for $x from 1 through 4 - $i
   306	    +on-slide-hide($i+3, all, "#introduction-#{nth($what, 4 - $x)}")
   307	    +on-slide-hide($i+3, all, "#introduction-#{nth($way, 4 - $x)}-way")
   308	    +on-slide-hide($i+3, 4-$x)
   309	
   310	/* First Look SASS Introduction
   311	$on-slide-parent: "#first-look-sass-introduction"
   312	$on-focus-trigger: ".span-on-the-fly"
   313	#first-look-sass-introduction
   314	  aside.two-columns
   315	    width: 30em
   316	    height: 24em
   317	+on-slide-hide(9, all)
   318	+on-slide-show(10, 1)
   319	+on-slide-hide-and-show(9, 11, 2)
   320	+on-slide-hide-and-show(9, 14, 3)
   321	+focus-on-slide(10, "span.sass-brackets" "span.sass-semicolon" "span.nested-property")
   322	@for $i from 1 through 4
   323	  $children: "span.sass-variables" "span.nested-selector" "span.sass-method" "span.sass-debug"
   324	  +focus-on-slide(10+$i, #{nth($children, $i)})
   325	
   326	/* First Look Compass Introduction
   327	$on-slide-parent: "#first-look-compass-introduction"
   328	#first-look-compass-introduction
   329	  aside.two-columns
   330	    width: 26em
   331	    height: 22em
   332	+focus-on-slide(18, "span.compass-opacity" "span.compass-column")
   333	@for $i from 1 through 3
   334	  $child: "span.cross-browsers" "span.css3-support" "span.some-ie-hack"
   335	  +focus-on-slide(19+$i, #{nth($child, $i)})
   336	+on-slide-hide(17, all)
   337	@for $i from 1 through 5
   338	  $key: 19 21 22 23 23
   339	  +on-slide-hide-and-show(17, nth($key, $i), $i)
   340	
   341	/* First Look CSS
   342	$on-slide-parent: "#first-look-css-introduction"
   343	#first-look-css-introduction
   344	  h3#FLCSI-it-is-depended-on-talent
   345	    font-size: 5em
   346	+on-slide-hide-and-show(25, 26, all)
   347	$on-slide-parent: "#FLCSI-it-is-depended-on-talent"
   348	+on-slide-hide-and-show(25, 26, all, "")
   349	
   350	/* Second Round Why SASS
   351	aside.styling-with-sass-code
   352	  font-family: $mono_font
   353	  position: absolute
   354	  top: 6em
   355	  right: 3.2em
   356	  width: 30em
   357	  height: 26em
   358	  padding: 0.5em
   359	  border: 1px dotted $gray_color
   360	  +border-radius(10px, 10px)
   361	  >code
   362	    font-size: 0.65em
   363	    display: inline-block
   364	    position: absolute
   365	    top: 0.5em
   366	    left: 0.5em
   367	    right: 0.5em
   368	    bottom: 0.5em
   369	    >span
   370	      display: inline-block
   371	      background-color: lighten($sass_color, 30%)
   372	      padding: 0.5em
   373	      +border-radius(10px, 10px)
   374	    >p
   375	      font-size: $font_size
   376	      text-align: center
   377	      &.i-love-vim
   378	        font-size: 3em
   379	$on-slide-parent: "#second-round-why-sass"
   380	+on-slide-hide-and-show(33, 37, all, "aside")
   381	@for $i from 1 through 3
   382	  $key: 37 38 39
   383	  $child: "ul.SRWS-the-reason-why-we-styling-with-sass" "ul.SRWS-why-we-not-styling-with-sass" "ul.SRWS-the-way-we-start"
   384	  +on-slide-hide-and-show(33, nth($key, $i), all, #{nth($child, $i)})
   385	@for $i from 1 through 3
   386	  +on-slide-hide-and-show(33, 36+$i, $i, "aside code")
   387	+on-slide-hide(38, 1, "aside code")
   388	+on-slide-hide(39, 1, "aside code")
   389	+on-slide-hide(39, 2, "aside code")
   390	
   391	/* Second Round 3S Tips
   392	$on-slide-parent: "#second-round-3s-tips"
   393	#second-round-3s-tips
   394	  aside.two-columns
   395	    width: 28em
   396	    height: 27em
   397	
   398	/* Style Design - I am not engineer
   399	#style-design-I-am-not-engineer
   400	  article
   401	    ul>li
   402	      font-weight: 700
   403	  aside.confusion-sample
   404	    @extend aside.styling-with-sass-code
   405	
   406	/* Style Design - The Beauty Of Compass Sample Code
   407	#style-design-the-beauty-of-compass-sample
   408	  h4.slide
   409	    line-height: 1.8em
   410	  aside.two-columns
   411	    width: 100%
   412	    top: 1em
   413	    height: 8em
   414	    line-height: 1em
   415	    margin-bottom: 2em
   416	    +column-count(3)
   417	    span.love-heart
   418	      +loveheart(0.4em)
   419	      margin: auto 0.5em
   420	
   421	/* Just do it
   422	#just-do-it
   423	  hgroup
   424	    h1:first-child
   425	      font-size: 6.5em
   426	
   427	/* SASS/Compass on Ruby
   428	$on-slide-parent: "#sass-and-compass-on-ruby"
   429	+on-slide-hide-and-show(62, 66, 1)
   430	
   431	/* Live Demo
   432	#live-demos
   433	  h1>span.special-live
   434	    @extend .special-3s
   435	    left: .6em
   436	    margin-right: .85em
   437	    &:after
   438	      content: "e"
   439	      left: .6em
   440	    &:before
   441	      content: "i"
   442	      left: -.4em
   443	  h1>span.special-demo
   444	    @extend .special-3s
   445	    left: .75em
   446	    margin-right: .85em
   447	    &:after
   448	      content: "o"
   449	      left: 1em
   450	    &:before
   451	      content: "e"
   452	      left: -.6em
   453	
   454	/* Live Demo - 3S
   455	#live-demo-3sss-sample
   456	  h1
   457	    font-size: 20em
   458	  .live-demo-sample-box
   459	    position: relative
   460	    margin: 1px 0
   461	    +border-radius(10px)
   462	  #LD3S-sample-after
   463	    overflow: hidden
   464	    background: rgba($sass_color, .6)
   465	    padding: 1em 1em
   466	    &:after
   467	      content: "\0020"
   468	      position: absolute
   469	      bottom: -10px
   470	      left: 0
   471	      width: 35.99%
   472	      height: 20px
   473	      display: block
   474	      +border-top-right-radius(10px)
   475	      @include body_background
   476	    &:before
   477	      content: "\0020"
   478	      position: absolute
   479	      bottom: -10px
   480	      right: 0
   481	      width: 64%
   482	      height: 20px
   483	      display: block
   484	      +border-top-left-radius(10px)
   485	      @include body_background
   486	  #LD3S-sample-content
   487	    @extend #LD3S-sample-after
   488	    background: rgba($css_color, .6)
   489	    &:after
   490	      bottom: -10px
   491	      left: 0
   492	      width: 55.99%
   493	      height: 20px
   494	      @include body_background
   495	    &:before
   496	      bottom: -10px
   497	      right: 0
   498	      width: 44%
   499	      height: 20px
   500	      @include body_background
   501	  #LD3S-sample-before
   502	    @extend #LD3S-sample-after
   503	    background: rgba($compass_color, .6)
   504	
   505	/* This Presentation - fork me on github
   506	$on-slide-parent: "#this-presentation-fork-me-on-github"
   507	#this-presentation-fork-me-on-github
   508	  h1
   509	    font-size: 7em
   510	+on-slide-hide-and-show(76, 77, 1)
   511	+on-slide-hide-and-show(76, 77, all, "h1")
   512	
   513	/* This Presentation - source code of sass
   514	#this-presentation-source-code-of-sass
   515	  .this-presentation-full-sass
   516	    position: relative
   517	    height: 24em
   518	    overflow: hidden
   519	    font-size: .92em
   520	    margin-bottom: 1em
   521	    background-color: rgba(10,10,10,0.8)
   522	    +border-radius(5px)
   523	    code
   524	      position: absolute
   525	      bottom: 0
   526	      top: 0
   527	      left: 0
   528	      right: 0
   529	      display: block
   530	      overflow: hidden
   531	      overflow-y: auto
   532	      pre
   533	        color: lighten(green, 20)
   534	        background: none
   535	        border: 0
   536	
   537	/* Hack desk.js
   538	.csstransitions.csstransforms
   539	  .deck-container
   540	    &:not(.deck-menu)
   541	      >.slide
   542	        .deck-before, .deck-previous
   543	          +opacity(0.9)
   544
   545  @import csstimer

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

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

當然字一定還要是綠色的,這樣才夠 Geek 嘛!

本投影片的 CSS...

不會有人真的想看吧

總行數是 1259 行

SASS 是 545 行

歡迎複製貼上

因為我是好人

網頁設計是種藝術

請相信自己的專業

Q & A

謝謝大家

Gift

See you in the PHPConf [email protected]

_special.sass

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

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

References

/

#