Pro Yearly is on sale from $80 to $50! »

Introduction to Sass Compass for Sencha Touch

4cf842e43a782a585d8707f2ba7f9a5c?s=47 Koji Ishimoto
March 15, 2013

Introduction to Sass Compass for Sencha Touch

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

March 15, 2013
Tweet

Transcript

  1. *OUSPEVDUJPOUP4BTT$PNQBTT GPS4FODIB5PVDI "NFCB)FBERVBSUFST$PNNVOJUZ%JWJTJPO 8FC%FWFMPQFS,PKJ*TIJNPUP !4FODIB6TFS(SPVQ+BQBO7PM 5PVDI

  2. @t32k

  3. )JHI1FSGPSNBODF8FC%FTJHO $PEJOH8FC1FSGPSNBODF -POH-JGF8FCTJUF0QUJNJ[BUJPO

  4. "HFOEB 8IBUJT4BTT $PNQBTTVTFT4BTT %FNP 4FODIB5PVDI $PODMVTJPO

  5. 8IBUJT4BTT

  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. $PNQBTTVTFT4BTT

  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

  58. None
  59. I think CSS is awesome! But it could be even

    better. Nicole Sullivan @stubbornella 09, November, 2009
  60. None
  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/