JavaScriptを使ってSass変数を制御する方法

Question

CSSファイルを生成しているSassファイルがあります。背景色、フォントサイズのために私のSassファイルで多くの変数を使用しましたが、JavaScriptを使用してすべての変数を制御したいと考えています。例えば、style.sassに私たちは、私は、JavaScriptからこれらの値を変更するにはどうすればよい

$bg : #000; 
$font-size: 12px; 

を

がありますか？

Answer 1

できません。 SASSはCSSプリプロセッサです。つまり、すべて CSSにコンパイルするとSASS固有の情報が消滅します。

Answer 2

JavaScriptはクライアント側（Webブラウザ内）で実行され、Sassはサーバー側で生成されるため、そのギャップを埋めるための方法を見つける必要があります。これを行う1つの方法は、AJAXスタイルのリスニングを設定してJavaScriptイベントをサーバーに送信してから、サーバーにstyle.sassファイルを編集して再コンパイルするようにすることです。

Answer 3

もしあなたがブートストラップが何をしたいのであれば（テーマをダウンロードするためのフィールドを編集する）。

あなたはする必要があると思います。この文字列

1. あなたは文字列として
2. ストアにこれらの変数を編集したい一方で、ファイルを持っており、検索と置換する.replace()を使用する変数
3. 出力をそれをファイルにコンパイルしてダウンロードするか、または圧縮してダウンロードします。

私はこれをPHPで個人的に行います。

Answer 4

JSONを使用してSassとJavaScriptの間でデータを共有します。

をJSを使用すると、身体に元のクラスを設定することができます。

は、私もこの機能を必要と関連する質問https://stackoverflow.com/a/26507880/4127132

Answer 5

を参照してください、ここで私のために働いたものです。 .blueまたは.default 今あなたが設定したいこれから延長する一連のルールを作成します。

.default .themeColor { 
    color: 'red'; 
} 
.blue .themeColor { 
    color: 'blue'; 
} 

今、代わりにあなたのSCSSファイルでcolor: $someColorを有していると、このようにそれを使用します。

.someClass { 
    @extend .themeColor; 
} 

身体にdefaultクラスがある場合、someClassの色は赤色になり、bodyにblueクラスがある場合、色は青色になります。