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

Question

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

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

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

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

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

也许有一种方法可以利用 #loginBox 是 .logoWrapper 的兄弟这一事实？

Answer 1

如果将样式属性添加到 .logoWrapper 元素，您就可以这样做。 但正如我所见，它不是，也没有样式属性。高度在 css 中定义。

无法根据在 css 中的某些其他元素上定义的属性在 css(或 sass)中设置样式。

这是一个例子，如果 .logoWrapper 元素上有 style 属性，如何做到这一点

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


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