Sass：如何将嵌套的导入选择器与父选择器合并？

Question

背景

我有一个想要导入 Bootstrap CSS 样式的现有网站。样式有冲突，所以我想确定规则的范围。

示例

// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}

// ---

// my-styles.scss

.my-selector {
   @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
}

这导致.my-selector .modal，但我想要.my-selector.modal。

我想避免复制粘贴样式规则。如果我能以某种方式使用@extend 做到这一点，那就太好了。

感谢您的任何建议。

Answer 1

我不确定我是否完全理解这个问题，因为 // node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss 不是当前/标准 Bootstrap SASS 文件的父级。

如果您使用的是最新的 Bootstrap，_modal.scss 包含所有 SASS 模态源。因此，如果您想将所有模态规则/类（.modal、.modal-header、.modal-body 等...）@import 到另一个父 my-selector 类，那将是...

@import "bootstrap";

.modal.my-selector {
    & {
        @import "bootstrap/modal";
    }
}

SASS 演示：https://codeply.com/p/XjYSfp0s8H