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">
はあなたが探していることが何であるかを簡素化することができます:いずれの場合では、それは次のようになりますか? – Milind
こんにちはMilind - 要するに、サブドメインに基づいてCSSをカスタマイズできるようにしたいと考えています。したがって、ユーザーがtenant1.company.comに行くと、1組の色/フォントが表示され、tenant2.company.comに行くと、色/フォントの別のセットが表示されます。 tenant1.company.comとtenant2.company.comの両方が同じインスタンスでホストされており、CSSの色とフォントはページの読み込み時に動的に決定されます。 –