Sencha Fashionのご紹介
こんにちは、ゼノフィaoyamaです。
今回はSencha Cmd 6 から導入されたFashionについてご紹介します。
Sencha Fashionとは
Fashionはひとことで言えば、SASSコンパイラのJavaScript実装です。
これまでSencha CmdではSASSのコンパイルにrubyによるコンパイラを利用してきました。
しかし以下の点を考慮して、JavaScriptでのSASSコンパイルに移行しました。
- rubyへの依存からの脱却
- コンパイル速度の向上
こうしてできあがったのが Sencha Fashion です。
仕組みについて
実装自体は、Sencha Cmd の内部にあります。
(インストールディレクトリ/extensions/sencha-fashion/)
コマンドとして利用する場合には、PhantomJS上で動作させています。
以下のスクリーンショットはSencha Cmdで sencha app build を実行したときのものです。
ruby ではなくphantomjsが動作していることがわかります。
さて、JavaScriptで実装されたということは、ブラウザ側で動作させることも可能ということになります。
Sencha Cmdでこれを実現するためには、sencha app watchを用いたライブリロード機能を利用する必要があります。
- sencha app watch
クエリにFashionを利用するパラメタを追加して、ブラウザからアクセスします。
- http://localhost:1841/?platformTags=fashion:1
この状態で、ブラウザからサーバにロングポーリングが行われ、SASSファイルの更新を監視します。
- ロングポーリングしている状態
サーバサイドでSASSが変更されたタイミングでブラウザに変更されたSASSファイルが送信されます。
このSASSファイルをASTに分解し、JavaScritのオブジェクト構造として保持します。
このオブジェクト形式からCSS文字列として出力することで、描画されているスタイルを変更します。
- 動作の流れ
以下はグローバル変数である$base-colorを変更した場合の画面です。
- カラー変更
メリット
上記の仕組みにより、コンパイル速度が改善されました。またJavaScript上で動作するため、JavaScriptでプラグインを追加することもできます。より詳細な内容は以下のサイトをご参照ください。
また一番大きなメリットとして、一度JavaScriptの形に落としこんでいるため、ブラウザ側のロジックでスタイルを変更することができます。これはブラウザ側でテーマシステムが構築できることを意味しています。
たとえば、Fashionの操作APIを利用すると、コンソール上で以下を実行するだけでスタイルが変更されます。
Fashion.setVariables({ "$base-color": "blue"});
- ブラウザ上でのカラー変更
まとめ
これまでSASSのコンパイルに悩んでいた方には、速度面の恩恵だけでも十分かもしれません。
しかし、この機能はそれ以外にも面白い可能性を秘めていると思います。
ぜひ触ってみて、フィードバックをいただければと思います。