如何使用SASS在子Div中为body标签应用CSS样式？

你提供的SASS代码无法实现需求，因为CSS选择器无法通过子元素选中其祖先元素——.fixedDiv body表示查找.fixedDiv内部的<body>标签，但<body>是.fixedDiv的父级容器，这个选择器匹配不到任何元素，所以不会生效。

下面是两种可行的实现方案：

方案一：JavaScript配合CSS类（兼容性最好） #

通过给<body>添加/移除类的方式控制overflow状态，这是兼容性最广的实现方式。

SASS代码 #

// 锁定body滚动的类
.body--locked {
  overflow: hidden;
}

.fixedDiv {
  width: 100vw;
  height: 50vh;
  position: fixed; // 补上fixed定位
  // 可选：添加默认隐藏样式
  display: none;
}

JavaScript代码 #

const fixedDiv = document.querySelector('.fixedDiv');

// 显示fixedDiv并锁定body滚动
function showFixedDiv() {
  fixedDiv.style.display = 'block';
  document.body.classList.add('body--locked');
}

// 隐藏fixedDiv并恢复body滚动
function hideFixedDiv() {
  fixedDiv.style.display = 'none';
  document.body.classList.remove('body--locked');
}

方案二：使用CSS :has()选择器（现代浏览器支持） #

如果你的项目只需要兼容现代浏览器，可以用CSS的:has()选择器直接实现，无需JavaScript。

场景1：通过内联display控制显示隐藏 #

// 当.fixedDiv显示时，锁定body滚动
body:has(.fixedDiv[style*="display: block"]) {
  overflow: hidden;
}

.fixedDiv {
  width: 100vw;
  height: 50vh;
  position: fixed;
  display: none;
}

场景2：通过类控制显示隐藏（更推荐） #

// 当.fixedDiv拥有active类时，锁定body滚动
body:has(.fixedDiv.fixedDiv--active) {
  overflow: hidden;
}

.fixedDiv {
  width: 100vw;
  height: 50vh;
  position: fixed;
  display: none;

  // 激活状态：显示元素
  &.fixedDiv--active {
    display: block;
  }
}

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