Introduction to Sass Compass for Sencha Touch

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@t32k

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

8IBUJT4BTT

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

*.scss *.sass *.css Sass Compiler

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Syntax

Slide 11

Slide 11 text

.scss Sassy CSS .sass Indented Syntax

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Sencha Touch Loves SCSS

Slide 16

Slide 16 text

Variables

Slide 17

Slide 17 text

$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

Slide 18

Slide 18 text

$alert-color : color $base-color : color $base-gradient : string $basic-slider : boolean $conﬁrm-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-ﬂoating-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

Slide 19

Slide 19 text

Nesting

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Bad Example

Slide 22

Slide 22 text

ʗ(^o^)ʘ

Slide 23

Slide 23 text

Don’t go more than four levels deep.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@import

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

appname/resources/sass/app.scss

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

@mixin/@extend

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

.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

Slide 38

Slide 38 text

ʗ(^o^)ʘ

Slide 39

Slide 39 text

appname/resources/sass/app.scss

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

$PNQBTTVTFT4BTT

Slide 42

Slide 42 text

compass-style.org

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

mhs.github.com/scout-app

Slide 45

Slide 45 text

compass.handlino.com

Slide 46

Slide 46 text

livereload.com

Slide 47

Slide 47 text

incident57.com/codekit

Slide 48

Slide 48 text

github.com/gruntjs/grunt-contrib-compass

Slide 49

Slide 49 text

command line $ cd /your_project_path $ compass watch

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

compass/css3

Slide 52

Slide 52 text

.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

Slide 53

Slide 53 text

@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-boxshadow-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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

%FNP

Slide 57

Slide 57 text

$PODMVTJPO

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Get Ready for the Future

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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/