SCSS实现点击按钮后修改背景色效果不生效问题求助

你当前代码存在两处问题：

• :active伪类内仅声明了--background-active变量，未将控制实际背景色的--b变量绑定到该值，是点击时背景不生效的核心原因
• 前缀属性拼写错误：-webkit-appearence需修正为-webkit-appearance

修改后的完整SCSS代码如下：

.grid-list {
  --color: #f6f8ff;
  --background: #2b3044;
  --background-hover: green;
  --background-active: blue;
  padding: 6px 12px 6px 8px;
  margin: 0;
  display: flex;
  outline: none;
  position: relative;
  border: none;
  border-radius: 9px;
  background: var(--b, var(--background));
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
  --scale: 0.95;
  --b: var(--background-active);
}
.grid-list:hover {
  --b: var(--background-hover);
}

如果你需要的是点击后持续保持蓝色，而非仅鼠标按住的瞬间生效，仅靠CSS伪类无法实现，需要配合JS给点击后的元素添加自定义类，再补充对应样式即可，示例：

/* 自定义激活态样式 */
.grid-list.is-active {
  --b: var(--background-active);
}

内容的提问来源于stack exchange，提问作者ffa32g