JavaScriptを使用してSASS変数を設定する方法

Question

sass cssを使用してCSSでグローバル変数を設定したいとします。 そのグローバル変数は、javascriptを使用して設定する必要があります。 javascriptやその他の方法で変数を設定する方法 私はroot cssを使用していますが、IEブラウザではサポートされていません。続き は私のcss

$mainbgimage: image url; 
.page-title { 
padding: 0; 
min-height: 200px; 
background-image: $mainbgimage; 
} 

Answer 1

SCSSであるなどの言語を前処理されています。 彼らはあなたのスタイルを開発して維持するのを容易にするために（変数のような）機能を持っています。 ただし、これらの機能はvanilla CSSではサポートされていないため、ブラウザがサポートするCSSを生成するためにプリプロセッサ（SASS）を実行する必要があります。

結果のCSSには変数がないため、クライアントサイドのJavaScriptで直接変更することはできません。

しかし、幸いなことに、ダイナミックスタイルのオプションが豊富に用意されています。 私はいつものようにCSSクラスをトグルお勧めします：あなたも、JavaScriptから直接要素のスタイルを設定することができ

document.getElementById('elementId').classList.add('specialStyleClass'); 

/* ... */ 

document.getElementById('elementId').classList.remove('specialStyleClass'); 

：

document.getElementById('elementId').style.color = 'red';