Question

如何使用Sass检测元素上是否存在样式属性，然后将样式应用于另一个元素（如果是这样）？以下是我的问题大纲：

每个网站都有一个包含徽标和按钮的标题。有些页面的标识高度为60px，而其他页面的标识高度为40px。当徽标高度为60px时，按钮需要margin-top：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和其他三个元素中。我知道我需要使用像if（）或@if这样的控制指令来测试条件，即.logoWrapper的锚标签的高度，但我不知道如何表达这个以及我是否尝试过因为语法错误或语言不具备此功能而无效。

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

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

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

Answer 1

如果将样式属性添加到.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;
}

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

1 个答案: