SCSS布尔属性无法处理:活动属性

Question

我已经将布尔变量设置为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>

Answer 1

实现您想要实现的目标的正确方法是使用JavaScript:简单地切换.activeCSS选择器

HTML

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

Scss

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

JavaScript函数

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

看看它在这把小提琴里演奏：https://jsfiddle.net/ezpvc16m/2/

使用Sass变量和布尔值来切换像:active这样的CSS选择器是没有意义的；CCD_ 3已经像CCD_ 4或CCD_。每当用户激活一个元素(在本例中为按钮(时，它就会被激活。否则，它不会被激活。

--此外，请记住，Sass被编译为CSS，CSS不能访问Sass变量和布尔值。