Sass/Scss 为插件重用相同的 styles

Question

So I have a class that I have applied some styles too as shown below:

.onetrust_container {
  display: grid;
  place-items: center;
  height: 50vh;
  text-align: center;

  &-map {
    height: 100vh;
  }
}

For some odd reason, the -map addon doesn't reuse the above styles, such as this:

I want to have the following items:

.onetrust_container {
  display: grid;
  place-items: center;
  height: 50vh;
  text-align: center;
}
.onetrust_container-map {
  display: grid;
  place-items: center;
  height: 100vh;
  text-align: center;
}

All help will be appreciated!

Answer 1

The way you wrote the first code block, the onetrust_container-map class does not inherit the CSS directly above it. Nesting selectors with the & operator allows you to reuse the parent selector, but that specific operator does not mean that the child selector inherits its parent's CSS unless you explicitly say so.

Your compiled CSS: https://www.sassmeister.com/gist/cbb69d8c522827b553787559671c405a?token=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&scope=gist,read:user

If you want the &-map to inherit its parent's CSS while applying its own, you'll want to structure the SASS that way:

.onetrust_container {
  &, &-map {
    display: grid;
    place-items: center;
    height: 50vh;
    text-align: center;
  }

  &-map {
    height: 100vh;
  }
}

https://www.sassmeister.com/gist/85801d79d309cc5d10ac22ad2839af35?token=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&scope=gist,read:user

For the &, &-map selector, you're saying "The parent selector, and 'The parent selector'-map"