不使用JavaScript时如何通过SCSS点击checkbox控制另一div缩放

核心错误有两处：

• :checked伪类仅作用于checkbox输入框元素，你原写法绑定在了#container上，不会触发状态匹配
• 你原写法的兄弟选择器匹配逻辑不符合DOM结构顺序

正确的SCSS代码如下：

/* 隐藏原生checkbox，通过label触发状态切换 */
.toggle {
  display: none;

  // 选中勾选状态后，同级后续的.responsive元素
  &:checked ~ .responsive {
    transform: scale(1, 1);
  }
}

#container {
  background: lightblue;
  width: 10vw;
  height: 10vh;
}

.responsive {
  background: orange;
  width: 10vw;
  height: 10vh;
  transform: scale(1, 0);
  // 可选配置：设置缩放原点为顶部，加过渡动画更流畅
  transform-origin: top;
  transition: transform 0.3s ease;
}

上述SCSS编译后会生成符合需求的原生CSS规则，无需JS即可实现点击label切换checkbox状态，触发.responsive元素缩放的效果。

内容的提问来源于stack exchange，提问作者Josef Lundström