我可以使用 Sass 根据另一个元素上存在的属性将样式应用于元素吗？

Question

如何使用 Sass 检测元素上是否存在样式属性，然后将样式应用于另一个元素？这是我的问题的概述：

每个站点都有一个包含徽标和按钮的标题。有些页面的徽标高度为 60 像素，而其他页面的徽标高度为 40 像素。当 logo 高度为 60px 时，按钮需要 margin-top: 1rem 添加到它们以使它们在标题容器中垂直居中。我知道这不是我可以用来在中间垂直对齐这些按钮的唯一方法。

每个站点都有一个特定于站点的样式表，其中声明了徽标的高度。本文档中包含的其他 sass 文件中还有更通用的样式。我正在尝试使用 Sass 创建一个规则，该规则仅在徽标为 60 像素时将边距应用于按钮。我不确定 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 和其他三个类似的元素。我知道我需要使用 if() 或 @if 之类的控制指令来测试条件，即 .logoWrapper 的锚标记的高度，但我不知道如何表达这一点以及我是否尝试过由于语法错误或语言没有此功能而无法正常工作。

我尝试以各种方式定位 CSS 属性选择器，但无济于事。这是一次尝试的示例：

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

也许有办法利用 #loginBox 是 .logoWrapper 的兄弟这一事实？

Answer 1

如果样式属性被添加到.logoWrapper 元素，你可以这样做。 但正如我所看到的，它不是，并且没有样式属性。高度在 css 中定义。

没有办法在 css（或 sass）中根据 css 中其他元素上定义的属性来设置样式。

如果.logoWrapper 元素上有样式属性，这是如何做到这一点的示例

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


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