Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Sass makes CSS fun again. Sass is an extension of

    CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  2. 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...
  3. .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; }
  4. output.css #data { float: left; margin-left: 10px; } #data th

    { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
  5. .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; }
  6. $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
  7. $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
  8. 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; }
  9. @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
  10. 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; }
  11. 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; }
  12. 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; }
  13. 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; }
  14. .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
  15. @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
  16. 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...
  17. .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
  18. @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
  19. I think CSS is awesome! But it could be even

    better. Nicole Sullivan @stubbornella 09, November, 2009