Sass/Scss嵌套@import时如何排除:root选择器？

我正在给非嵌入视图的嵌入内容设置样式，目前用以下写法能直接生效：

.embeded-selector {
    @import "library/somelibrary";

    @import "_some_other_styles";
}

这种写法会把.embeded-selector自动添加到导入的somelibrary所有选择器前面，但遇到一个问题——库内部用:root定义了根级变量，最终生成了.embeded-selector :root。虽然可以通过搜索替换最终CSS解决，但想知道能不能在Sass/Scss层面排除:root或任意选择器的自动嵌套？

注：我已经试过@at-root，但它的without:不支持指定选择器，而且没法拆分导入的库内容。

解决方案 #

方法1：用@use替代@import配合变量重写 #

如果目标库支持Sass模块系统，优先用@use导入，直接在导入阶段重写:root里的变量，从根源避免嵌套影响：

// 先单独导入库的变量模块（若库做了拆分）
@use "library/somelibrary/variables" with (
    $primary-color: #165DFF,
    $font-base-size: 14px
);

// 再嵌套导入库的样式部分
.embeded-selector {
    @use "library/somelibrary/styles";
    @import "_some_other_styles";
}

如果库没拆分变量和样式，也可以手动提取:root里的变量，在嵌套导入前重新定义，让嵌套后的样式直接使用新变量。

方法2：自定义混合宏处理导入内容 #

写一个简易混合宏，通过正则匹配排除指定选择器，给目标选择器加上@at-root跳出嵌套：

@mixin import-with-exclude($path, $exclude-selectors: (:root)) {
    $content: file-get($path);
    @each $selector in $exclude-selectors {
        $content: str-replace($content, "#{$selector}", "@at-root #{$selector}");
    }
    #{unquote($content)};
}

// 使用示例
.embeded-selector {
    @include import-with-exclude("library/somelibrary.scss");
    @import "_some_other_styles";
}

注意：该方法需要Sass 1.33+版本支持file-get和str-replace，如果库内容有复杂嵌套选择器，正则规则可能需要调整。

方法3：修改库的:root为全局变量 #

如果有权限修改目标库文件，直接把:root里的变量改为全局Sass变量，这样嵌套导入时就不会生成.embeded-selector :root：

// 库文件修改：将:root变量替换为全局Sass变量
$primary-color: #2196F3 !default;
$font-size-base: 16px !default;

// 原有样式直接使用全局变量
.button {
    background-color: $primary-color;
    font-size: $font-size-base;
}

嵌套导入后，样式会正常生成.embeded-selector .button，变量不受嵌套影响。

内容的提问来源于stack exchange，提问作者jave.web