Introduction to Sass Compass for Sencha Touch

Transcript

1. *OUSPEVDUJPO
   UP
   4BTT$PNQBTT GPS
   4FODIB
   5PVDI "NFCB
   )FBERVBSUFST
   $PNNVOJUZ
   %JWJTJPO 8FC
   %FWFMPQFS
   
   ,PKJ
   *TIJNPUP 
   !4FODIB
   6TFS
   (SPVQ
   +BQBO
   7PM 5PVDI
   
2. @t32k
3. )JHI
   1FSGPSNBODF
   8FC
   %FTJHO $PEJOH
   8FC
   1FSGPSNBODF -POH
   -JGF
   8FCTJUF
   0QUJNJ[BUJPO
4. "HFOEB 
   8IBU
   JT
   4BTT 
   $PNQBTT
   VTFT
   4BTT 
   %FNP
   4FODIB
   5PVDI 
   $PODMVTJPO
5. 8IBU
   JT
   4BTT
6. Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
7. command line $ sass watch foo.scss:foo.css
8. *.scss *.sass *.css Sass Compiler
9. command line $ gem install sass Fetching: sass-3.2.7.gem (100%) Successfully installed sass-3.2.7 1 gem installed Installing ri documentation for sass-3.2.7... Building YARD (yri) index for sass-3.2.7... Installing RDoc documentation for sass-3.2.7...
10. Syntax
11. .scss Sassy CSS .sass Indented Syntax
12. .scss .sass =table-base th text-align: center font-weight: bold td, th padding: 2px =left($dist) float: left margin-left: $dist #data +left(10px) +table-base @mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px} } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; }
13. output.css #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
14. .scss .sass =table-base th text-align: center font-weight: bold td, th padding: 2px =left($dist) float: left margin-left: $dist #data +left(10px) +table-base @mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px} } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; }
15. Sencha Touch Loves SCSS
16. Variables
17. $base-color: #bbb; $right-margin: 16px; .container { margin-right: $right-margin / 2; border-color: $base-color; } .container { margin-right: 8px; border-color: #bbbbbb; } output.css .scss
18. $alert-color : color $base-color : color $base-gradient : string $basic-slider : boolean $confirm-color : color $font-family : font-family $global-list-height : measurement $global-row-height : measurement $include-border-radius : boolean $include-default-icons : boolean $include-default-uis : boolean $include-floating-panels : boolean $include-form-sliders : boolean $include-highlights : boolean $include-html-style : boolean $neutral-color : color $page-bg-color : color Global_CSS docs.sencha.com/touch/2-1/#!/api/Global_CSS
19. Nesting
20. output.css .scss .component-A { .head { color: #fff; } .body { color: #ccc; } .foot { color: #000; } } .component-B { .head { color: #000; } .body { color: #fff; } .foot { color: #ccc; } } .component-A .head { color: #fff; } .component-A .body { color: #ccc; } .component-A .foot { color: #000; } .component-B .head { color: #000; } .component-B .body { color: #fff; } .component-B .foot { color: #ccc; }
21. Bad Example
22. ʗ(^o^)ʘ
23. Don’t go more than four levels deep.
24. touch/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss
25. @import
26. t32k.github.com/speed/rtt/AvoidCssImport.html
27. box-modal.css header.css list.css mypage.css nav_global.css nav_category.css jser.css
28. box-modal.css header.css list.css mypage.css nav_global.css nav_category.css jser.css app.css Compiled!
29. appname/resources/sass/app.scss
30. @import 'core'; @import 'layout'; @import 'reset'; @import 'core'; @import 'widgets'; @import 'draw'; @import 'form-sliders-basic'; @import 'form-sliders'; @import 'form'; @import 'img'; @import 'indexbar'; @import 'list'; @import 'loading-spinner'; @import 'map'; @import 'media'; @import 'msgbox'; @import 'panel'; @import 'picker'; @import 'sheets'; @import 'tabs'; @import 'toolbar-form'; @import 'toolbar'; @import 'sencha-touch/default/all'; app.scss
31. @mixin/@extend
32. mixin.css mixin.scss @mixin boxshadow { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .mixinA { @include boxshadow; } .mixinB { @include boxshadow; } .mixinC { @include boxshadow; } .mixinA { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .mixinB { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .mixinC { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; }
33. extend.css extend.scss .boxshadow { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .extendA { @extend .boxshadow; } .extendB { @extend .boxshadow; } .extendC { @extend .boxshadow; } .boxshadow, .extendA, .extendB, .extendC { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; }
34. mixin2.css mixin2.scss @mixin boxshadow($color:#fff) { -webkit-box-shadow: 0 1px 0 0 $color; box-shadow: 0 1px 0 0 $color; } .mixinA { @include boxshadow; } .mixinB { @include boxshadow(#ccc); } .mixinC { @include boxshadow(#000); } .mixinA { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .mixinB { -webkit-box-shadow: 0 1px 0 0 #ccc; box-shadow: 0 1px 0 0 #ccc; } .mixinC { -webkit-box-shadow: 0 1px 0 0 #000; box-shadow: 0 1px 0 0 #000; }
35. extend2.css extend2.scss %boxshadow { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; } .extendA { @extend %boxshadow; } .extendB { @extend %boxshadow; } .extendC { @extend %boxshadow; } .extendA, .extendB, .extendC { -webkit-box-shadow: 0 1px 0 0 #fff; box-shadow: 0 1px 0 0 #fff; }
36. @extend ŚŞţũƃŪƄ͔Θ͍͍ΑŚŞţũƃŪƄ ʅЧʆʀ ʅЧʆ ŰōŰō
37. .ad- area:after, .detail .comment:after, .comment .expand:before, .comment .child:before, .comment .child:after, .thread- notify:before, .line:before, .box-rel .thread:after, .box- rel .right a:after, .cate-new .list-view > li:after, .cate- new .list-view > li > a:after, .cate-new .list-view .c-new > a:after, .cate-new .list-child li:before, .cate-new .list- child a:after, .cate-new .thread:after, .cate- new .thread.new:before, .cate-new.archive .line- text:after, .list-nested .child li:after, .posted- talk .headline:before, .posted-talk li:before, .posted- talk .right a:after, .profile .activity a:after, .wall .wrapper-child:before, .enquete .list-opt input:checked ~ label:after, .enquete .list-opt label.active:after, .enquete .list- qa .talk:after, .enquete .right a:after, .enquete .box- pager .btn:after { display: block; content: ""; } Bad Example
38. ʗ(^o^)ʘ
39. appname/resources/sass/app.scss
40. @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-picker; @include sencha-tabs; @include sencha-toolbar; @include sencha-toolbar-forms; @include sencha-indexbar; @include sencha-list; @include sencha-layout; @include sencha-carousel; @include sencha-form; @include sencha-msgbox; app.scss
41. $PNQBTT
    VTFT
    4BTT
42. compass-style.org
43. command line $ gem install compass Successfully installed compass-0.12.2 1 gem installed Installing ri documentation for compass-0.12.2... Building YARD (yri) index for compass-0.12.2... Installing RDoc documentation for compass-0.12.2...
44. mhs.github.com/scout-app
45. compass.handlino.com
46. livereload.com
47. incident57.com/codekit
48. github.com/gruntjs/grunt-contrib-compass
49. command line $ cd /your_project_path $ compass watch
50. 
    $44 
    )FMQFS 
    -BZPVU 
    3FTFU 
    5ZQPHSBQIZ 
    6UJMJUJFT compass-style.org/reference/compass
51. compass/css3
52. .gradient { @include box-shadow( #000 0 1px 1px 0 ); } .gradient { -webkit-box-shadow: black 0 1px 1px 0; -moz-box-shadow: black 0 1px 1px 0; box-shadow: black 0 1px 1px 0; } output.css .scss
53. @mixin box-shadow($shadow-1: default, $shadow-2: false, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false, $shadow-10: false) { @if $shadow-1 == default { $shadow-1: -compass-space-list(compact(if($default-box- shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color)); } $shadow: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10); compass mixin box-shadow
54. touch/resources/themes/stylesheets/sencha-touch/default/_mixins.scss
55. touch/resources/themes/stylesheets/sencha-touch/default/core/_core.scss
56. %FNP
57. $PODMVTJPO
59. I think CSS is awesome! But it could be even better. Nicole Sullivan @stubbornella 09, November, 2009
61. Get Ready for the Future
62. Thank you! t32k @t32k koji.ishimoto Today's latte, Sass. | Flickr by yukop
63. photo credit http://www.flickr.com/photos/yukop/7935589654/ http://www.flickr.com/photos/druidicparadise/367047412/ http://www.flickr.com/photos/boklm/486646798/ http://www.flickr.com/photos/familymwr/5548053540/