Sassを使用して、別の要素の属性の存在に基づいて要素にスタイルを適用できますか？

Question

Sassを使用して、スタイル属性が要素に存在するかどうかを検出し、そうであれば別の要素にスタイルを適用する方法を教えてください。ここに私の問題の概要があります：

すべてのサイトにはロゴとボタンが含まれています。一部のページには60pxのロゴがあり、他のページには40pxのロゴがあります。ロゴの高さが60pxの場合、ボタンに余白が必要です：1remを追加すると、ヘッダコンテナ内に垂直方向に配置されます。私は、これらのボタンを真ん中に垂直に配置するために使用できる唯一の方法ではないことが分かっています。

各サイトには、ロゴの高さが宣言されているサイト固有のスタイルシートがあります。この文書に含まれている他のsassファイルには、より一般的なスタイルがあります。私はSassを使って、ロゴが60pxのときだけ、マージンをボタンに適用するルールを作成しようとしています。これがSassで可能かどうかは分かりません。ここで

は単純化されたマークアップです：ここで

<div id="header"> 
    <div class="container"> 
     <div class="grid-12"> 
      <div class="logoWrapper"> 
       <h1> 
        <a> </a> 
       </h1> 
      </div> 
      <div id="loginBox"> 
       <div class="loginTab"> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

は、メディアクエリ内の高さと単純化CSSです：

.logoWrapper { 
    a { 
     height: 3rem; 
     @include bp(720) { 
      height: 6rem; 
     } 
    } 
} 

高さが.logoWrapper内のアンカータグに適用されます。 .loginTabとそれに似た3つの要素にマージンを追加する必要があります。 .logoWrapperのアンカータグの高さなどの条件をテストするために、if（）や@ifのようなコントロールディレクティブを使用する必要があることを理解していますが、これを表現する方法がわかりません。構文が間違っているか、言語にこの機能がないために機能しません。

私はCSS属性セレクタをさまざまな方法でターゲットにしようとしましたが、無駄です。ここでは一つの試みの例です：

#loginBox { 
    .loginTab { 
     @include bp(720) { 
      @if .logoWrapper a[height="6rem"] { 
       margin-top: 1rem; 
      } 
     } 
    } 
} 

おそらく#loginBoxが.logoWrapperの兄弟であるという事実を活用する方法はあるのか？

Answer 1

style属性が.logoWrapper要素に追加されていれば可能です。 しかし、わかりましたが、そうではなく、スタイル属性がありません。高さはCSSで定義されています。

CSSの他の要素で定義されているプロパティに応じて、CSS（またはSass）でスタイルを設定する方法はありません。ここで

はあなたの思考のための.logoWrapper要素

<div class="logoWrapper" style="height: 6em"> 
    <h1> 
    <a></a> 
    </h1> 
</div> 
<div id="loginBox"></div> 


.logoWrapper[style="height: 6em"] + #loginBox { 
    margin-top: 15px; 
}