緑色のKitchen Sink(Sencha Touchのサンプル)が見たい！

ちなみに普通のKitchen Sinkはこれ

http://dev.sencha.com/deploy/touch/examples/kitchensink/

作戦(というかやり方の方針)

先の勉強会(Ext JS / Sencha Touch 勉強会の資料（11月、東京） | Ext Japan Blog)
で@ispernさんのライブコーディングを見ていた感じ、

$base-color変数を変えることで、緑色化する
sencha-touch.cssを丸ごと置き換え

って感じだったので、そのようにやってみる。

Compassのプロジェクトフォルダを探す

Compassのプロジェクトフォルダには、config.rbがあるはず。
sencha-touch-1.0\resources\sass
で発見。

Compassのプロジェクトフォルダでcompass watch

error android.scss (Line 365: Undefined mixin 'sencha-form-sliders'.)
Sass::SyntaxError on line ["365"] of C: Undefined mixin 'sencha-form-sliders'.

とか、

error my-sencha-touch.scss (Line 134: Undefined mixin 'display-box'.)
Sass::SyntaxError on line ["134"] of C: Undefined mixin 'display-box'.

みたいなエラーが出るも、何度かcompass watchを再起動しているうちに直った。
原因不明。

my-sencha-touch.scssを作成

sencha-touch.scssをコピーして、my-sencha-touch.scssを作成。
$base-colorの行を追加。

$base-color: #00FF00;

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;

compass watchが変更を検知

>compass
 watch --trace
>>> Change detected to: C:/app/apache-tomcat-6.0.18/webapps/ROOT/sencha-touch-1.
0/resources/sass/android.scss
overwrite ../css/android.css
overwrite ../css/apple.css
   create ../css/my-sencha-touch.css
overwrite ../css/sencha-touch.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected to: C:/app/apache-tomcat-6.0.18/webapps/ROOT/sencha-touch-1.
0/resources/sass/my-sencha-touch.scss
overwrite ../css/my-sencha-touch.css

my-sencha-touch.cssが出来上がる。

Kitchen Sinkで読み込むCSSファイルを変更

sencha-touch-1.0\examples\kitchensink\index.htmlを変更。

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Kitchen Sink</title>

    <!--<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">-->
    <link rel="stylesheet" href="../../resources/css/my-sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="resources/css/sink.css" type="text/css">
    <link rel="stylesheet" href="resources/css/codebox.css" type="text/css">

...

sencha-touch.cssをやめて、my-sencha-touch.cssを読み込むように変更してます。

で、Kitchen Sinkを表示してみると、、？

で、出たー！
もうちょい濃い目の緑の方が、しっくりくるかも。。

ITコンサルの日常

ITコンサル会社に勤務する普通のITエンジニアの日常です。