How to apply CSS to body tag in a child Div using SASS?-CodePudding

The scenario is I want to add CSS style for <body> on a child DIV

Whenever a DIV with a Fixed position is displayed, overflow will be hidden on the Body

.fixedDiv {
      width: 100vw;
      height: 50vh;
      body {
       overflow: hidden
      }
}

CodePudding user response：

Sass will always compile to css, so you always should ask yourself how to do it in css first.

What you are trying to achieve can be done using the :has pseudo selector.

body:has(.fixedDiv) {
   overflow: hidden;
}

But at the time of writing, this selector is not yet fully supported by all major browsers. For Firefox it is still behind an experimental flag.

So I recommend to avoid using it for production projects yet. I am sure there is an alternative way of approaching the goal you are trying to achieve with a different layout.

CodePudding user response：

it will be nice if you use the embedded css style attribute

the internal css way

.fixedDiv { width: 100vw; height: 50vh; body { overflow: hidden } }