SASS

Wijmoは、Wijmo CSSファイルをより簡単に作成して管理できるように、Sassの使用を開始しました。

TypeScriptがJavaScriptを拡張するように、SassはCSSを拡張します。Sassでは、モジュール化、変数、構造体、コンパイル時の構文チェック、セレクタのネスト、関数などの機能が提供されます。ここ数年の間に、Sassは最も人気のあるCSSプリプロセッサとなり、よく使用されるJavaScriptフレームワークやバンドラーツールのすべてでサポートされています。

TypeScriptと同様に、Sassもオプションです。Sassで作成されたCSSファイルを、Sassを意識することなく使用できます。ただし、Wijmoのスタイルをカスタマイズしたり、独自のテーマを作成したり、使用するWijmoモジュールのみを含む小さなCSSファイルを作成する場合は、Sassを使用することをお勧めします。

Sassを使用する場合は、Sassツールが必要です。お勧めのツールは以下のとおりです。

フォルダ構成

WijmoのSassファイルには、次のフォルダ構成が使用されています。

wijmo.scss                  // メインscssファイル
misc
    _constants.scss         // 色名
    _glyphs.scss            // Wijmoグリフ
    _mixins.scss            // ユーティリティ関数
    _variables.scss         // テーマ変数
core                        // Wijmo core内のモジュール
    _chart.scss
    _chart_hierarchical.scss
    _chart_interaction.scss
    _core.scss
    _gauge.scss
    _grid.scss
    _grid_filter.scss
    _grid_grouppanel.scss
    _input.scss
    _nav.scss
enterprise                  // Wijmo enterprise内のモジュール
    _chart_finance.scss
    _multirow.scss
    _olap.scss
    _sheet.scss
    _viewer.scss 
themes                      // バンドルされているテーマ
    wijmo.theme.cerulean.scss
    wijmo.theme.cleandark.scss
    wijmo.theme.cleanlight.scss
    // etc

Sassの表記規則に従い、名前の先頭にアンダースコアが付くファイルは他のファイルにインクルードされ、単独のCSSファイルは生成されません。

wijmo.scssファイルを使用して、メインCSSファイルwijmo.cssが生成されます。このファイルには、次のファイルが含まれています。

// wijmo.scss

// misc
@import "misc/mixins"; // 関数
@import "misc/constants"; // 名前付きの色
@import "misc/variables"; // テーマ変数
@import "misc/glyphs"; // Wijmoグリフ

// coreモジュール
@import "core/core";
@import "core/input";
@import "core/grid";
@import "core/grid_grouppanel";
@import "core/grid_filter";
@import "core/chart";
@import "core/chart_interaction";
@import "core/chart_hierarchical";
@import "core/gauge";
@import "core/nav";

// enterpriseモジュール
@import "enterprise/sheet";
@import "enterprise/multirow";
@import "enterprise/olap";
@import "enterprise/viewer";
@import "enterprise/chart_finance";

Web Compilerまたは他のSassツールを使用してこのコードを実行すると、通常のwijmo.cssとwijmo.min.cssが出力されます。

CSSファイルの圧縮

Wijmo enterpriseモジュールをまったく使用せずに、CSSファイルのサイズを圧縮するには、上記のwijmo.scssから最後の5行（enterpriseモジュールを含む行）を除いたwijmo-core.scssファイルを作成します。

これで、wijmo.css全体の約半分のサイズのwijmo-core.cssファイルが作成されます。

このファイルは既に作成済みです。wijmo-core.cssファイルは配布物の中に含まれています。ただし、この方法で、アプリケーションに必要なモジュールのみを含む、最適化されたCSSファイルを生成できます。たとえば、inputモジュールとgridモジュールのルールのみを含むCSSファイルを作成できます。

カスタムテーマ

標準のwijmo.cssファイルに加えて、Wijmoには多くのカスタムテーマが含まれています。ほとんどのテーマは、いくつかのSass変数の値を上書きする方法で作成されています。たとえば、Ceruleanテーマは、次に示すようにwijmo.theme.cerulean.scssファイルから作成されています。

// wijmo.theme.cerulean.scss -- Ceruleanテーマ
$wj-bkg: #fcfcfc;
$wj-txt: #082d43;
$wj-bdr: none;
$wj-hdr-bkg: #033c73;
$wj-hdr-txt: #fff;
$wj-sel-bkg: #2a9fd6;
$wj-msel-bkg: #77afc9;
$wj-cell-grp-bkg: #777777;
// etc 

@import "../wijmo.scss";

このテーマファイルでは、いくつかのWijmo変数が設定されています。また、このファイルにはベースのwijmo.scssファイルがインクルードされています。これで、やることはすべてです。標準のwijmo.cssの代わりに使用できるwijmo.theme.cerulean.cssファイルが出力されます。

メモ：これらのテーマファイルは自己完結型です。標準のwijmo.cssファイルを拡張するのではなく、その代わりに使用されます。古いバージョンのWijmoから、この点が変更されています。