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

问题描述

背景

我有一个现有网站，我想在其中导入 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 以某种方式做到这一点，那就太好了。

感谢您的任何建议。

解决方法

我不确定我是否完全理解这个问题，因为 // 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