Question

我已将布尔变量设置为false，单击按钮后我想在scss文件中更改其背景颜色。但是看来：active上的display变量未设置为true，如何实现此功能？

这是我的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切换$config['enable_query_strings'] = FALSE; CSS选择器：

HTML

.active

Scss

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

JavaScript函数

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

看到它在这个小提琴中起作用：https://jsfiddle.net/ezpvc16m/2/

使用Sass变量和布尔值切换const xy = () => { let btn = document.querySelector("button"); btn.classList.toggle(":active"); }这样的CSS选择器是没有意义的； :active已经像:active或true一样工作。每当用户激活一个元素（在这种情况下为按钮）时，它就会被激活。否则，它不会被激活。

- 另外，请记住，Sass已编译为CSS，而CSS无法访问Sass变量和布尔值。

SCSS布尔型属性不适用于：active属性

1 个答案: