開発部の川野です。今回も Sencha Touch をテーマに、記事を書かせて頂きます。
Sencha Touch と言えば、「綺麗な UI」が特徴ですよね （JavaScript だけで画面を構築する独特のスタイルも特徴ですが）。
本記事では、その綺麗な UI を支えている「Sass」「Compass」というツールについて、また、Sencha Touch で、それらをどのように利用しているかについて、少し覗いてみたいと思います。
Sass makes CSS fun again.
Sass は、CSS の冗長性や、保守性・生産性の悪さを解決するために生まれた CSS の拡張言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。
Sass の具体的な説明は本記事では割愛させて頂きますが、一言で言うと、CSS の「プログラミング」を可能にしてくれます。押さえておきたい特徴としては、
– 変数
– ネスト（ローカルスコープのようなもの）
– ミックスイン（関数のようなもの）
– セレクター継承（OOPの継承のようなもの）
– if文
– 演算
などでしょうか。これらの機能を使って、まるでプログラムを組むかのように、CSS （の元になる定義）を作っていけます。興味のある方は、プロジェクトのサイトで詳しく紹介されているので、訪ねてみて下さい。
ちなみに Sass には、 Sass 記法と、SCSS 記法の二つのシンタックスが選べるようになっています。コマンドひとつで、お互いの形式に変換可能です。
Sass 記法は、Python のように、インデントでブロックを表現し、ブレースやセミコロンが不要です。SCSS 記法は、CSS と互換性があり、学習コストの低さが魅力のよう。
個人的には、Sass 記法の方が気に入ったのですが、今後の普及やプロジェクトで使うことを考えると、SCSS 記法を選ぶ方が無難のように思いました。
Compass は、スタイルシートの jQuery ？
Sass がプログラミング言語だとすると、Compass は、Sass言語のフレームワークやライブラリに相当するものです (JavaScript でいうところの、 jQuery、 Ruby でいうところの Ruby on Rails がよいメタファでしょうか)。
Compass では、いくつかの再利用可能な定義が提供されていて、それらを利用することで、効率よく、高品質な CSS を作っていくことができます。
具体例をひとつあげると、面倒なベンダープレフィックスが、 Compass が提供してくれているミックスインを利用すれば、一行で済むようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// これをコンパイルすると、、 #border-radius { @include border-radius(25px); // border-radius は Compass が提供するミックスイン } // こうなります b #border-radius { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; } |
Sencha Touch での Sass/Compass 利用事例
各ツールについて簡単に紹介したので、これから具体的に、Sencha Touch でどのように Sass/Compass を利用しているのか見ていきたいと思います。
Sencha Touch では、各ファイルを以下のような構成で配置しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
- resources - css // このディレクトリにコンパイルしてできた CSS が出力される sencha-touch.css - sass sencha-touch.scss // コンパイルするのはこのファイル config.rb - themes compass_init.rb - images ... - lib theme_images.rb - stylesheets - sencha-touch - default _all.scss _core.scss _global.scss _mixins.scss _variables.scss _widgets.scss - core _core.scss _layout.scss _reset.scss - widgets _buttons.scss _carousel.scss _form-sliders-basic.scss _form-sliders.scss _form.scss _img.scss _indexbar.scss _list.scss _loading-spinner.scss _map.scss _media.scss _msgbox.scss _panel.scss _picker.scss _sheets.scss _tabs.scss _toolbar-forms.scss _toolbar.scss |
アンダースコアで始まるファイル名が気になりましたよね？
Sass には他の Sass ファイルをインポートする機能があり、インポートするファイルはアンダースコアで始める命名規約があります。
実際にコンパイルするのは、sass ディレクトリ直下の sencha-touch.scss だけで、他の scss ファイルは、sencha-touch.scss からインポートされる設計になっています。
コンパイルされた css ファイルは、 css 直下のディレクトリに出力されます。出力先などの設定は、sass ディレクトリにある config.rb で行っています。
lib 直下にある theme_images.rb は、Sencha が作成した Sass の拡張スクリプトで、画像を base64 形式のテキストにエンコードして、CSSファイルに埋め込みます。モバイル環境での、サーバーへのリクエストを減らすための工夫のようです。
themes 直下の compass_init.rb では Compass 用の設定を行っています。
全体像を俯瞰したところで、今度は、コンパイル対象の sencha-touch.scss の中身を見ていきたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@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-indexbar; @include sencha-list; @include sencha-list-paging; @include sencha-list-pullrefresh; @include sencha-layout; @include sencha-carousel; @include sencha-form; @include sencha-msgbox; @include sencha-loading-spinner; |
sencha-touch.scss 自体は、たったの 18行です。
冒頭の @import は、sencha-touch/default ディレクトリ以下にある _all.scss ファイルをインポートしています。
その後に続く、@include は、インポートしたファイル内で定義されているミックスインを呼び出しています。
それでは、_all.scss の中身を見てみましょう。
|
1 2 |
@import 'core'; @import 'widgets'; |
同じディレクトリにある、 _core.scss と _widgets.scss をインポートしています。
という訳で、まず、_core.scss の中身を。
|
1 2 3 |
@import 'core/reset'; @import 'core/core'; @import 'core/layout'; |
core ディレクトリ以下にある scss ファイルをインポートしているだけです。
_widgets.scss も同じようなことをやっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@import 'widgets/map'; @import 'widgets/picker'; @import 'widgets/panel'; @import 'widgets/toolbar'; @import 'widgets/buttons'; @import 'widgets/tabs'; @import 'widgets/carousel'; @import 'widgets/indexbar'; @import 'widgets/list'; @import 'widgets/form'; @import 'widgets/sheets'; @import 'widgets/msgbox'; @import 'widgets/toolbar-forms'; @import 'widgets/loading-spinner'; @import 'widgets/img'; @import 'widgets/media'; |
_core.scss では、 _reset.scss、 _core.scss、 _layout.scss の順でファイルをインポートするように指示しています。
_reset.scss を見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; ... |
いわゆる リセットCSS です。ブラウザごとにデフォルトのCSSが異なるため、各プロパティをリセットする作法がありますが、それに該当します。
ちなみに Compass のライブラリにもリセット CSS が含まれていて、有名な（？） Eric Meyer氏によるリセット CSS を
|
1 |
@import "compass/reset" |
の一行で読み込むことができます。
_reset.scss はこれぐらいにして、次は、 _core.scss を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@import '../global'; @import 'compass/css3/box-sizing'; @import 'blueprint/typography'; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; $experimental-support-for-microsoft: false; $experimental-support-for-khtml: false; html, body { font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif; ... |
core と言うだけあって、全体に関わる定義や、頻繁に使われるクラスの定義が行われています。
まず始めに、上位ディレクトリにある _global.scss を読み込んでいます。
_global.scss の中身を見てみましょう。
|
1 2 |
@import 'variables'; @import 'mixins'; |
同じディレクトリにある _variables.scss と _mixins.scss をインポートしています。
グローバルということで、 _variables.scss には全体に関係する変数、 _mixins.scss には全体で利用したいミックスインが定義されています。
ここにある変数を変更することで、全体に影響を与えることができます。
ひとつ具体例を挙げると、$base-color という変数の色を変更することで、全てのコンポーネントの見た目（色）を変えることができます。Sencha Touch では、こういった変数を提供することで、開発者がテーマをカスタマイズできるようにしています。
各ファイルの詳細は割愛して、_core.scss に戻ります。
_global.scss を読み込んだ後、Compass の box-sizing ファイルと、 Compass に同梱されている blueprint モジュールのtypography ファイルを読み込んでいます。これらは、後の定義で利用しています。
その後、$experimental-support-for-… という変数に false の値をセットしています。
これらの変数は Compass のミックスインの動作を変更するもので、ベンダープレフィックスの対象を指定することができます。Sencha Touch は webkit のブラウザでしか動作させないので、 FireFox や Opera 、IE 用のプレフィックスは不要ですよね。無駄にファイルサイズが大きくなりますし。そういった、痒いところに手が届くオプションが用意されているのは、Compass の嬉しいところです。
細かい解説を始めてしまいましたが、この調子だと、かなり長くなりそうなので、今回はこの程度で終わりにしたいと思います。尻切れですみません。。
まとめ
駆け足で紹介しましたが、Sass/Compass について、また、Sencha Touch の CSS 開発について、雰囲気だけでも感じ取ってもらえれば幸いです。
Sass/Compass については、面倒な気がして消極的だったのですが、実際に触ってみて、すっかりファンになりました。確かに、CSS を作るのが楽しくなります。また、CSS をライブラリ化する発想は、とても魅力的に感じました。
特定の言語やフレームワークを前提としたものではないので、もし CSS に苦しめられた経験があれば、次のプロジェクトではぜひ試してみてはいかがでしょうか？
学習に投資した時間は、すぐに元が取れると思います ;)
最近のコメント