SCSS范围和变量问题

Question

I'm attempting to animate a UL popping up. I want this to happen on a button click event. I have :active and :hover states on my button that work. The problem arises when I try to add conditional CSS to the dropdown list upon pressing the button. My current approach attempts to use variables. The HTML is:

<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>

An example of the SCSS that animates the button:

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

$isExpanded is a global variable. In my dropdown UL css, I attempt to test if $isExpanded is true, and apply CSS if it is:

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

    @if $isExpanded {
        color: red;
    }
}

I've also tried:

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

But I think that syntax is wrong.

The color is never applied in either case. How do I apply CSS to an element based on a global SASS variable set by a different element's class?

Please excuse me if I've made a stupid mistake, I have only been using CSS precompilers for about 2 days now.

Answer 1

I think you are mistaking SCSS for a real-time script for CSS, which it is not. It is precompiled to standard CSS. All your logic is computed at this compilation stage.

This should achieve what you are looking for:

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