Question

我正试图为UL弹出动画制作动画。我希望这发生在按钮点击事件上。我的按钮上有:active和:hover个状态。当我尝试在按下按钮时将条件CSS添加到下拉列表时出现问题。我目前的方法试图使用变量。 HTML是：

<div class="col-md-6 col-md-offset-3 dropDiv">
    <button class="btn btn-primary dropdown-toggle" type="button" id="actionHeader" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">How can we help you?</button>
    <ul class="dropdown-menu actionDrop text-center" aria-expanded="false">
        <li><a href="/blogs">Software Consulting</a></li>
        <li><a href="">Careers at Bellwether</a></li>
        <li><a href="">Our Team</a></li>
        <li><a href="">Bellwether in the News</a></li>
    </ul>
</div>

为按钮设置动画的SCSS示例：

&[aria-expanded="true"] {
    transition: transform 0.3s;
    transform: rotateX(90deg) translateY(0);
    $isExpanded: true;
}

$isExpanded是一个全局变量。在我的下拉UL css中，我尝试测试$isExpanded是否为真，如果是，则应用CSS：

.actionDrop {
    background: $bellTan;
    width: 100%;
    text-align: center;
    overflow: hidden;

    @if $isExpanded {
        color: red;
    }
}

我也试过了：

&:@if $isExpanded {
    color: red;
}

但我认为语法错误。

在任何一种情况下都不会应用颜色。如何根据由不同元素的类设置的全局SASS变量将CSS应用于元素？

如果我犯了一个愚蠢的错误，请原谅我，我现在只使用CSS预编译器大约2天了。

Answer 1

我认为你错误地将SCSS用于CSS的实时脚本，但事实并非如此。它预编译为标准CSS。所有逻辑都在此编译阶段计算。

这应该达到你想要的目的：

.dropdown-toggle[aria-expanded="true"] + .actionDrop {
  color: red;
}

SCSS范围和变量的问题

1 个答案: