Sass/Scss 为插件重用相同的样式

Question

所以我有一个 class 我也应用了一些样式，如下所示：

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

  &-map {
    height: 100vh;
  }
}

出于某些奇怪的原因，-map 插件没有重复使用上述样式，例如：

我想要以下物品：

.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;
}

我们将不胜感激！

Answer 1

您编写第一个代码块的方式，onetrust_container-map class 不会直接继承其上方的 CSS。使用 & 运算符嵌套选择器允许您重用父选择器，但该特定运算符并不意味着子选择器继承其父选择器的 CSS 除非您明确说明。

你编译的CSS：https://www.sassmeister.com/gist/cbb69d8c522827b553787559671c405a?token=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&scope=gist,read:user

如果您希望 &-map 在应用其自身的同时继承其父级的 CSS，您需要以这种方式构建 SASS：

.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

对于 &, &-map 选择器，您说的是“父选择器和 'The parent selector'-map”

Sass/Scss 为插件重用相同的样式

Sass/Scss reuse same styles for addon

css

sass