1 つのインターフェイスに複数のアプリケーションを含むプラットフォームがあります。1 つの一般的なスタイルシートがあり、パフォーマンス上の理由から、アプリケーションごとに個別のものがあります。このプラットフォーム全体は、いくつかのベンダーのブランドであり、それぞれが独自の色を持っています。デフォルト スタイルのオーバーライドのみを含む、特定のブランド用の別のスタイルシートをロードすることでこれを行います。
現在、スタイルシートを改善および整理するために、LESS の導入を検討しています。しかし、各ブランドの変数を調整するための明確な解決策を見つけるのに苦労しています.
プロジェクト構造は次のとおりです。
platform/
css/
general.css (general styles for all applications)
app1.css (specific styles for application 1)
app2.css (specific styles for application 2)
...
branding1.css (color overrides for branding 1)
branding2.css (color overrides for branding 2)
...
LESS では、次のような構造を考えます。
platform/
css/
variables.less (containing default colors, etc.)
general.less (general styles for all applications)
app1.less (specific styles for application 1)
app2.less (specific styles for application 2)
...
branding1.less (variables overrides for branding 1)
branding2.less (variables overrides for branding 2)
...
ブランドのオーバーライドをすべてのスタイルシートに簡単に適用するにはどうすればよいでしょうか。
これまでに発見したことは、すべてのスタイルシートに対してブランディング固有の less ファイルを作成することです。たとえば、次のgeneral.lessように作成しますgeneral.branding1.less。
@import "general.less";
@import "branding1.less";
これにより、ブランディング 1 の一般的なスタイルで望ましい結果が作成されます。もちろん、すべてのアプリケーション スタイルシートでこれを行うことができます。しかし、これは n*m 個のファイル (アプリケーション * ブランド) になり、そのような 2 つのインポート行しかありません。これは良い解決策とは思えません (HTML ヘッダーでこれらのファイルを参照するための余分な処理については言及していません) - もっと良い方法はありませんか?
注: 展開する前に、Web Essentials を使用してファイルを前処理しています。クライアント側の前処理はオプションではありません。