最初にSaasの使用例を見たのはDITA Open Toolkit搭載のHTML5変換プラグインでした．これは以下から見ることができます．
https://github.com/dita-ot/dita-ot/tree/develop/src/main/plugins/org.dita.html5/sass
ここには各種の.scssファイルが格納されているのですが、これらはDITA-OTそのものをビルドするときにコンパイルされて.cssファイルに落ちる仕組みになっています．DITA-OTをビルドするなんていうことは普通の使用者ではやることはまずないでしょうから、このsassフォルダはプラグインを実行する際には使用することはありません．つまり元々動的に.cssを生成する仕組みにはなっていませんでした．
さらにこの.scssファイルの構成からは最終的に[DITA-OT]/plugins/org.dita.html5/cssフォルダに、
が生成されます．これ自身は従来の考え方ではやむを得ないものですが、元の.scssファイルの作り方に特徴があります．それは[DITA-OT]/plugins/org.dita.html5/sassフォルダのcommonltr.scssとcommonrtl.scssファイルの作り方です．中を見てみるとわかりますが
- commonltr.scssで大方のスタイルを作ってしまってから
- commonrtl.scssはcommonltr.scssを@importでインポートして、RTLで必要な差分のみを記述する
という構造であることです．
https://github.com/dita-ot/dita-ot/blob/develop/src/main/plugins/org.dita.html5/sass/commonltr.scss
https://github.com/dita-ot/dita-ot/blob/develop/src/main/plugins/org.dita.html5/sass/commonrtl.scss
最初はなんの疑問もなくこの方式を踏襲していたのですが、これは本当にSassの本質的な使い方なのか？という疑問が日々湧いてきました．それはなぜかと言いますと、現実の課題として私が受け持っているのはフロントエンドの担当の方が作り出す結構な量のCSSを受け取ってSVNで管理する．更にLTRの言語だけでなくRTLの言語もサポートできるように「なんとかする」であったからです．
日々アップデートされる.cssを見ながら、「RTLとLTRの差分」を抽出して管理するのはあまりCSSを知らない私にとってはちょっと重荷でした．
そこで考え出したのは、LTRとRTLを統一する.scssファイルを作成して管理し、そこからパブリッシュの際に動的に.cssを生成するというものでした．ここでLTRとRTLを統一する.scssファイルの書き方とはなんぞや？ということになりますが、CSSは御存知のように物理的なleft/rightの世界で、行の進行方向の開始位置/終了位置という概念がありません．このためleft/rightを
- LTRではleftが行の進行方向の開始位置、rightが終了位置
- RTLではrightが行の進行方向の開始位置、leftが終了位置
ととらえ直してやることにします．こうすると、
［LTR：_variables-bidi-ltr.scss］
$inlineStart:left;
$inlineEnd:right;
［RTL：_variables-bidi-rtl.scss］
$inlineStart:right;
$inlineEnd:left;
という変数をLTRとRTLで別々に作っておき、肝心の.scssでは例えば
#footer-nav ul li { width: 100%; text-align: $inlineStart; }
などと書くことができます．コンパイル時に動的に
を選択して適用してやれば良い訳です．実際にやってみると、変数だけでなく、ミックスインや関数などいろいろ作る必要があることがわかりました．例えばmarginも次のようなミックスインが有効です．
［LTR：_variables-bidi-ltr.scss］
@mixin margin ($top, $right, $bottom, $left){
margin: $top $right $bottom $left;
}
［RTL：_variables-bidi-rtl.scss］
@mixin margin ($top, $right, $bottom, $left){
margin: $top $left $bottom $right;
}
このようにして最初の段階ではまったく日本語しか考えていなかったはずのCSSをSass化してこのようなインラインの方向を抽象化することにより、思いのほか簡単にアラビア語のCSSを自動生成することができました．
この抽象化のための.scssのサンプルは以下のGitHubのリポジトリで公開しています．
よろしければ参考にしていただければと思います．
