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

Question

所以我有一個 class 我也應用了一些 styles 如下所示：

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

  &-map {
    height: 100vh;
  }
}

由於某些奇怪的原因， -map插件沒有重用上面的 styles，例如：

我想要以下物品：

.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，除非您明確說明。

Your compiled 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選擇器，您說的是“父選擇器和'父選擇器'-map”