Sass SCSS布尔属性不工作：活动属性

我已经将布尔变量设置为false，点击按钮我想在scss文件中更改其背景色。但显示变量似乎未设置为true on:active，如何实现此功能

这是我的scss文件

$display : false;

.bot {
  &:active {
    $display: true;

    display: none;
  }

}

@if $display {
  .bot {
    background-color: brown;

  }
}

这是我的html文件

<button class="bot" (click)="xy()">Table
    </button>

表格
实现您想要实现的目标的正确方法是使用JavaScript简单地切换
.active
CSS选择器：

HTML

JavaScript函数

const xy = () => {
   let btn = document.querySelector("button");
   btn.classList.toggle(":active");
}

看到它在这把小提琴里工作了吗

使用Sass变量和布尔值切换CSS选择器（如
：active
）毫无意义<代码>：活动的
已经像
true
或
false
一样工作。每当用户激活某个元素（在本例中为按钮）时，就会激活它。否则，它不会被激活

--
另外，请记住，Sass是编译为CSS的，CSS不能访问Sass变量和布尔值

.bot {
  background-color: brown;
  &:active {
    display: none;
  }
}

const xy = () => {
   let btn = document.querySelector("button");
   btn.classList.toggle(":active");
}