Introduction to Sass Compass for Sencha Touch

Transcript

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

   View Slide

2. @t32k
   

   View Slide

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

   View Slide

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

   View Slide

5. 8IBUJT4BTT
   

   View Slide

6. Sass makes CSS fun again.
   Sass is an extension of CSS3, adding
   nested rules, variables, mixins,
   selector inheritance, and more.
   

   View Slide

7. command line
   $ sass watch foo.scss:foo.css
   

   View Slide

8. *.scss
   *.sass
   *.css
   Sass Compiler
   

   View Slide

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

   View Slide

10. Syntax
    

    View Slide

11. .scss
    Sassy CSS
    .sass
    Indented Syntax
    

    View Slide

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;
    }
    

    View Slide

13. output.css
    #data {
    float: left;
    margin-left: 10px;
    }
    #data th {
    text-align: center;
    font-weight: bold;
    }
    #data td, #data th {
    padding: 2px;
    }
    

    View Slide

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;
    }
    

    View Slide

15. Sencha Touch Loves SCSS
    

    View Slide

16. Variables
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Nesting
    

    View Slide

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;
    }
    

    View Slide

21. Bad Example
    

    View Slide

22. ʗ(^o^)ʘ
    

    View Slide

23. Don’t go more than four levels deep.
    

    View Slide

24. touch/resources/themes/stylesheets/sencha-touch/default/widgets/_tabs.scss
    

    View Slide

25. @import
    

    View Slide

26. t32k.github.com/speed/rtt/AvoidCssImport.html
    

    View Slide

27. box-modal.css header.css
    list.css
    mypage.css
    nav_global.css nav_category.css
    jser.css
    

    View Slide

28. box-modal.css header.css
    list.css
    mypage.css
    nav_global.css nav_category.css
    jser.css
    app.css
    Compiled!
    

    View Slide

29. appname/resources/sass/app.scss
    

    View Slide

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
    

    View Slide

31. @mixin/@extend
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

36. @extend
    ŚŞţũƃŪƄ͔Θ͍͍ΑŚŞţũƃŪƄ ʅЧʆʀ
    ʅЧʆ
    ŰōŰō
    

    View Slide

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
    

    View Slide

38. ʗ(^o^)ʘ
    

    View Slide

39. appname/resources/sass/app.scss
    

    View Slide

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
    

    View Slide

41. $PNQBTTVTFT4BTT
    

    View Slide

42. compass-style.org
    

    View Slide

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

    View Slide

44. mhs.github.com/scout-app
    

    View Slide

45. compass.handlino.com
    

    View Slide

46. livereload.com
    

    View Slide

47. incident57.com/codekit
    

    View Slide

48. github.com/gruntjs/grunt-contrib-compass
    

    View Slide

49. command line
    $ cd /your_project_path
    $ compass watch
    

    View Slide

50. $44
    )FMQFS
    -BZPVU
    3FTFU
    5ZQPHSBQIZ
    6UJMJUJFT
    compass-style.org/reference/compass
    

    View Slide

51. compass/css3
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. touch/resources/themes/stylesheets/sencha-touch/default/_mixins.scss
    

    View Slide

55. touch/resources/themes/stylesheets/sencha-touch/default/core/_core.scss
    

    View Slide

56. %FNP
    

    View Slide

57. $PODMVTJPO
    

    View Slide

58. View Slide

59. I think CSS is awesome!
    But it could be even better.
    Nicole Sullivan @stubbornella 09, November, 2009
    

    View Slide

60. View Slide

61. Get Ready for the Future
    

    View Slide

62. Thank you!
    t32k
    @t32k
    koji.ishimoto
    Today's latte, Sass. | Flickr by yukop
    

    View Slide

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/
    

    View Slide