时间戳

首页 > 解决方案 > SCSS 布尔属性不适用于 :active 属性

sass - SCSS 布尔属性不适用于 :active 属性

问题描述

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

这是我的scss文件

$display : false;

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

    display: none;
  }

}

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

  }
}

这是我的html文件

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

标签： sassboolean

解决方案

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

HTML

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

文案

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

JavaScript 函数

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

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

:active像使用 Sass 变量和布尔值一样切换 CSS 选择器是没有意义的；:active已经像trueor一样工作了false。每当用户激活元素（在本例中为按钮）时，它就会被激活。否则，它不会被激活。

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

推荐阅读