我可以使用薩斯的樣式應用於基於其他元素的屬性存在的元素？

如何使用薩斯檢測樣式屬性是否存在的元素上，如果是的話樣式應用到另一個元素？這裏是我的問題的概述：我可以使用薩斯的樣式應用於基於其他元素的屬性存在的元素？

每個網站都有一個包含標誌和按鈕的標題。某些頁面有60px高度的徽標，而其他頁面有40px高度的徽標。當徽標高度爲60px時，按鈕需要使用margin-top：1rem添加到它們以將它們垂直居中放在頁眉容器中。我知道這不是我可以用來在中間垂直對齊這些按鈕的唯一方法。

每個站點都有在標誌的高度被宣佈爲特定站點的樣式表。本文檔中包含的其他sass文件中有更多的一般樣式。我試圖使用Sass創建一個規則，只有當徽標是60px時，纔會將邊距應用於按鈕。我不確定這是否可能與薩斯。

這裏是簡化的加價：

<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和其他三個元素。我明白，我需要使用一個控制指令一樣，如果（）或@if測試的條件，即，.logoWrapper的錨標記的高度，但我不知道怎麼表達這一點，無論什麼我已經試過因語法錯誤或語言不具備此功能而無法正常工作。

我試圖針對各種方式的CSS屬性選擇，但無濟於事。這裏有一個嘗試的例子：

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

也許有一種方法來利用這一事實#loginBox是.logoWrapper的兄弟？

來源

2016-12-15 flyingSorceress

你可以做，如果樣式屬性添加到.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; 
}

來源

2016-12-15 14:15:45 Kantoci

感謝您的想法樣式屬性可以這樣做。這似乎並不奏效。但它是有用的知道，我試圖用CSS做的實際上不可能。我必須以另一種方式實施。 – flyingSorceress

我可以使用薩斯的樣式應用於基於其他元素的屬性存在的元素？

回答

相關問題