5

[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました.このように複数の条件を吸収するSassの運用の方法について教えていただきたいです.

[現在のやり方]
ものすごく単純化した例で説明しますと、まずLTR/RTL用の次の2つの.scssファイルを作っています.

_variable-ltr.scss

$inlineStart:left;
$inlineEnd:right;

_variable-rtl.scss

$inlineStart:right;
$inlineEnd:left;

これで、様々な階層の.scssファイルは、変数を用いてLTR/RTLを抽象化して作成しています.

_contents-common.scss

body ul li { width: 100%; text-align: $inlineStart; }

これからLTR/RTL用の.cssを作成します.

contents-ltr.css

@charset "UTF-8";
@import 'modules/_variable-ltr.scss';
@import 'modules/_contents-common.scss';

contents-rtl.css

@charset "UTF-8";
@import 'modules/_variable-rtl.scss';
@import 'modules/_contents-common.scss';

最終的にcontents-ltr.cssかcontents-rtl.cssのいずれかを言語タグに従って、出力フォルダにcontent.cssとしてコピーします.

[ブランドの導入]

このような方法だと、さらに製品ブランドによる分岐を加えるとすると、LTR/RTLの2種に加えて、

  1. 製品ブランド別の変数を格納した.scssファイルを作る.
  2. LTR/RTLの2種×ブランド数分のcontent-xxx.scssファイルを作る.

ということになりますが、これに更に条件が加わればきりがなくなるでしょう.

[教えていただきたい点]

  • Sassでこのような複数の条件を処理しなければならない場合のやり方がありましたら教えてください.
  • SassのコンパイルはHTMLのビルドの際にnode.js + gulp + gulp-sass で行っています.Webをいろいろ見ましたが、この過程でコンパイルにパラメータを渡す方法はないようです.(といいますか、Sassの考え方とちょっと違うようです)ビルドの際に、① LTR/RTL、 ② ブランドの変数を格納する .scssファイルを動的に作って分岐させるのが早道でしょうか?

以上 Web系初心者の質問ですが、よろしくお願いいたします.

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。