SCSS/SASSは変数を条件付きにします

Question

私のscssに変数を条件付ける方法があるかどうかを調べようとしています。このシナリオはフォールバックフォントローダーのためのもので、すべてのフォントがロードされたときに私の体にクラスを投げるので、フォントを切り替えることができます。

$primary-font-family: 'Font1', sans-serif; 
$primary-font-normal: 400; 
$primary-font-bold: 700; 

$secondary-font-family: 'Font2', serif; 
$secondary-font-normal: normal; 
$secondary-font-bold: normal; 

これは私のために素晴らしい仕事をしているが、私は探しています -

だからアイデアは、私は私の_variables.scssファイルがセットアップされている、そしてそれはこのような何かを探して、すべての私のサイトのフォントを持っているの内側にあります私はこれらのフォントを消費しているすべてのインスタンスにCSSのクラスリスナーを追加せずに簡単にそれらを交換するための簡単な方法です。これらの変数を条件付きにする方法があるかもしれないのであれば、私は思っていた - このようなものが可能であるかどう

// if .fonts-loaded class is on body, use loaded font 
$primary-font-family: 'Font1', sans-serif; 
// else use system default font 
$primary-font-family: 'defaultSystemFont', sans-serif; 

わからない、誰もがこれを達成する方法を知っているん。読んでくれてありがとう！

Answer 1

JSのようにページに何かがロードされているかどうかはわかりません。

それはコンパイルしたら、サスは、静的なCSSとなり、必ずしもページで行った変更に応じて通信していません（知っ超えて、それが物事を事前に定義された疑似クラスに応じて、特定の方法のスタイルを設定する必要があります。）

また、ページを「もっと考える」ように言い続けるほど、読み込み時間の点でメリットが少なくなります。

は、CSSを使用すると、常にデフォルトのフォントスタックなどを設定することができ、「カスケード」されているので：

.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;} 

...そして、おそらくそれはグローバルレイアウトした後、インポートだ部分内のCSS（中下テーマの一部として）：

これは読み込み時にデフォルトの基礎を設定して徐々に強化します。 Sassはページの読み込み状況を認識することはありませんが、利用可能なものといつの時点かに基づいてスタイルを提供します。提示される予定のものがすべて満たされるまでフォールバックすることができます。

===

あなたのコメントによると、この場合の条件の理由があるようには思えません。

基本的なCSSは、どれくらい厳格にしたいかによって、.thisClass .thatClassまたは.thisClass > .thatClassで処理します。だから、例えば、サスに：

.thatClass { 
    color: #333; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1em; 
} 

.thisClass { 
    .thatClass { 
     font-family: 'SuperSpecialFont'; 
    } 
} 

それは.thisClassの内部にネストいた場合、それは、これらのプロパティを適用します。そうでなければ、それはもともと定義されていたままになります。