如果SCSS中元素上具有属性的true语句等于true？

Question

在导航栏中的第一个div块中，我想执行一个if语句来说：

if (aria-expanded === true) { 
  height = calc(100vh - 75px)
} 
else { 
  height = 90% 
}

---

<nav className="navbar navbar-expand-xl navbar-side" aria-label="Side Navigation" >
     <div className={`navbar-toggler ${this.state.notification ? 'has-notification' : ''}`} data-toggle="collapse" data-target="#sidebarCollapse" aria-controls="sidebarCollapse" aria-expanded="false" aria-label="Toggle side navigation">
         Menu
     </div>
     <div className="collapse navbar-collapse" id="sidebarCollapse">
         <ul className="navbar-nav mr-auto">
             <li className="nav-user">
                 <div className="profile-pic">
                     <i className="fa fa-lg fa-user mt-1" />
                 </div>
                 <i><span>{this.state.authenticatedUser.first_name} {this.state.authenticatedUser.last_name}</span><br />{this.state.authenticatedUser.job_title}</i>
             </li>
             <NavBar authenticatedUser={this.state.authenticatedUser} activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} notification={this.state.notification} />
         </ul>
     </div>
 </nav>

侧边栏的一些scss是：

.navbar-side {
    position: relative;
    padding: 0;
    display: block;
    height: calc(100vh - 75px);
    overflow-y: scroll;
    width: 100%;

.navbar {
    padding: 0;

}

.navbar-nav {
    width: 100%;
    flex-direction: column;
    padding-bottom: 50px;    

Answer 1

使用属性选择器：

[aria-expanded=true] {
  height: calc(100vh - 75px)
}

[aria-expanded=false] {
  height: 90%
}

例：

[aria-expanded=true] {
  height: calc(100vh - 75px)
}

[aria-expanded=false] {
  height: 90%
}

[aria-expanded=true] {
  color:red;
}

[aria-expanded=false] {
  color:blue;
}