$30 off During Our Annual Pro Sale. View Details »

Introduction to Sass Compass for Sencha Touch

Koji Ishimoto
March 15, 2013

Introduction to Sass Compass for Sencha Touch

Koji Ishimoto

March 15, 2013
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

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/