SCSS boolean property not working on :active property - sass

Question

I have set boolean variable to false and on click of button I want to change its background color in scss file. But it looks like display variable is not set to true on :active, how can I achieve this functionality?
Here is my scss file
$display : false;
.bot {
&:active {
$display: true;
display: none;
}
}
#if $display {
.bot {
background-color: brown;
}
}
Here is my html file
<button class="bot" (click)="xy()">Table
</button>

Answer 1

The proper way to implement what you want to achieve is simply toggling the .active CSS selector using JavaScript:
HTML
<button class="bot" onclick="xy()">Table</button>
Scss
.bot {
background-color: brown;
&:active {
display: none;
}
}
JavaScript function
const xy = () => {
let btn = document.querySelector("button");
btn.classList.toggle(":active");
}
See it working in this fiddle: https://jsfiddle.net/ezpvc16m/2/
It makes no sense toggling a CSS selector like :active using Sass variables and booleans; :active already works like true or false. It is activated whenever an element (in this case, a button) is activated by a user. Otherwise, it's not activated.
--
Also, keep in mind that Sass is compiled to CSS and CSS doesn't have access to Sass variables and booleans.