3W3S - 簡介
這尛？為什麼？怎麼用？
- 這尛: 都跟樣式（CSS）有關係。
- 為什麼: 寫得更少，做的更多（Write less, sleep more.）。
- 怎麼做: 我可以接受贊助（Donate me!）。
CSS, SASS, Compass
簡單的方法？困難的方法？或是...
- 簡單的方法: 讓你的前端工程師來做。
- 困難的方法: 如果你是 VD+FE+PG 都點滿了全包，恭禧你（God maybe not bless you.）。
- 其他的方法？叫閃光洽幫你寫。
3SSS
csS+sasS+compasS
我是閃光洽
講師的坑好大...
http://phpconf.hinablue.me
請愛用 Google Chrome 瀏覽器
SASS
Syntactically Awesome Stylesheets
SASS - 美妙的樣式
-
SASS 寫得更少。
- 省去大括號與分號。
- 同屬性、選擇器嵌套。
- 引入與擴展。
-
SASS 做的更多！
- 支援變數、函式呼叫。
- 流程控制。
- 迴圈。
- 引入與擴展與嵌套*。
- 除錯。
- 大量縮減選擇器的複製貼上！使用擴展嵌套*。
- 內建函式，讓操作更為便利。
- 除錯功能*，可以避免死不瞑目追蹤到底錯在哪。
多留點時間陪陪你身邊的人。
Compass
CSS Authoring Framework
CompasS - 樣式界的神兵
可以少打更多字。
與 SASS 相似的撰寫風格*。
跨瀏覽器支援，IE MUST DIE。
支援更多 CSS Framework，預設 CSS3, Blueprint*。
支援部份 IE Hack*，也可以解決部份 hasLayout 的問題。
可以擴展更多功能*
CSS
Cascading Style Sheets
CSS - ...樣式表
如果你實在不知道什麼是 CSS...
這種東西很講天份的*
那什麼是 CSS ?
- 看官方文件（W3C*）。
- 看 W3schools* 的教學。
- 上 Google 搜尋 CSS*。
- 看我的部落格*。
- 我也有寫 Layout Presentation*。
RT"B"
讓一切回歸到基礎之上
毫無章法的樣式表
我要寫個慘字
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;
}
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;
}
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;
}
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
本投影片的 CSS...
不會有人真的想看吧
總行數是 1259 行
SASS 是 545 行
歡迎複製貼上
因為我是好人
網頁設計是種藝術
請相信自己的專業
Q & A
謝謝大家
Gift
See you in the PHPConf 2011@TW
_special.sass
本投影片所有過場特效工具
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
/
#