2017-01-15 10 views
0

私はシングルインスタンスのシングルデータベースマルチテナントアプリケーションを設定しています。バックエンドはRuby on Railsで書かれていますが、フロントエンドはAnglesJSのRailsフレームワークとは別のアプリです。サブドメインに基づいてカスタマイズ可能なCSSをセットアップするにはどうすればよいですか?

私は抽象的な親状態の解決を使用してサブドメインを決定し、その後テナントを決定しています。テナントが決定したら、フロントエンドの設定ファイルからCSS変数の値を読み取って、残りのプロジェクトで参照されるクラスを含むメインのstyles.cssファイルを生成することができます。

私はSassやLessのようなCSSプリプロセッサを使ってこれを行うことができると聞いていますが、どちらも経験がなく、これを設定する方法を正確に把握しようとしています。

いくつかのヘルプ/コード例がありがとう - ありがとう!

+0

はあなたが探していることが何であるかを簡素化することができます:いずれの場合では、それは次のようになりますか? – Milind

+0

こんにちはMilind - 要するに、サブドメインに基づいてCSSをカスタマイズできるようにしたいと考えています。したがって、ユーザーがtenant1.company.comに行くと、1組の色/フォントが表示され、tenant2.company.comに行くと、色/フォントの別のセットが表示されます。 tenant1.company.comとtenant2.company.comの両方が同じインスタンスでホストされており、CSSの色とフォントはページの読み込み時に動的に決定されます。 –

答えて

1

Sass以下は、ブラウザをロードする前にコンパイルされているため、実際には実行できません。言い換えれば、ブラウザはコンパイルされたCSSファイルのみを読み込みます。

ただし、目標を達成する方法はいくつかあります。私はRubyに慣れていないので、私はサーバ言語の提案を一般的なものにしておきます。私はあなたの完全な状況を知らないので、これらは明らかに完全な解決策として意味されていません。代わりに、これはあなたにいくつかのリードを与えるためのちょっとしたアイデアです。

おそらく最も良い方法は、サーバーロジックを使用してbodyタグに異なるクラスを適用し、そのクラスを使用してページに適用されるスタイルを決定することです。例えばだから:

/* probably a good idea to have fallback styles */ 
 
body { 
 
    color: black; 
 
    background: white; 
 
    } 
 

 
body.style-one p { 
 
    color: red; 
 
    background: blue; 
 
    } 
 

 
body.style-two p { 
 
    color: blue; 
 
    background: red; 
 
    }
<body class="style-one"> 
 
    <p>This text will be red.</p>

また、当然のことながら、JavaScriptを使用してbodyタグのクラスを変更することができ、そのためユーザーは、ページのテーマを変更することができます。


また、同様のサーバーロジックを使用して、補助の <link rel="stylesheet"...>タグを書き出して、1つまたは別のスタイルシートを取得することもできます。ここでの大きな利点は、さまざまなテーマのルールが多数ある場合は、それらのテーマをそれぞれ独自のファイルに分けて保存できることです。

私が使用した最後の方法は、GET変数に基づいてオンザフライでスタイルシートを作成することですが、スタイルシートをCSSファイルとして出力します。この方法の欠点は、ブラウザのキャッシングの利点を失うことだと思います。

<?php 
 
header("Content-Type: text/css"); 
 

 
if($_GET['theme'] == 'one') { 
 

 
    echo 'p { color: red; }'; 
 

 
} else { 
 
    
 
    echo 'p { color: blue; }'; 
 
    
 
} 
 
?> 
 

 
a { 
 
    color: green; 
 
}
<link rel="stylesheet" href="style.css.php?theme=one">

+0

ありがとう - 本当に私の考えを明らかにするのに役立ちました! –