SASS：同じプロパティの特定の値を持つ要素がすでにページに存在する場合のCSSプロパティの条件値

Question

CSSプロパティの値を変更したい（私はSASSを使用しています）特定のプロパティの値が '$ additionalNavHeight'の要素がページに存在するかどうか。いくつかのページでは、他にはそのような要素はありません。

@mixin top-position($navHeight, $additionalNavHeight) 
{ 
    @if $additionalNavHeight == true { 
    .loadingAnimation { 
     top: $navHeight + $additionalNavHeight; 
    } 
    } 
    @else { 
    .loadingAnimation { 
     top: $navHeight; 
    } 
    } 
} 

そして私は、セレクタでのミックスインが含ま：私はSASSのミックスインを書いた私は、このクラスで要素のプロパティ「トップ」の値を変更する必要があります考え

@include top-position($navHeight, $additionalNavHeight); 

を'loadingAnimation'は、ページ内にすでに存在する場合、 'トップ'のプロパティ '$ additionalNavHeight'の値を持つ要素が存在します。コンパイラはエラーを表示しませんが、コードは何も変更しません。私は間違って何をしていますか？どんな助けでも大歓迎です。

Answer 1

最も簡単な解決策です。要素が存在するかどうかはJavaScriptで確認し、 とし、2番目のクラスを要素に適用する必要があります。 2番目の場合（要素が存在する） には、高さを追加する必要があります。この場合、mixinは冗長です。最初のdivが存在する場合の要素は、クラスnewClassを受け取ることになります。この場合 https://jsfiddle.net/ra9r8rk8/：ここ

.loadingAnimation { 
     top: $navHeight; 
    } 
    .loadingAnimation.additinnalHeight { 
     top: $navHeight + $additionalNavHeight; 
    } 

は、例えばjsfiffleあります。 （要素）

編集：これは第2の改善されたソリューションです。実際、正規表現の必要はありません。私たちはclassListを使用することができます： https://jsfiddle.net/ra9r8rk8/1/