如何使用Sass @if通过检查变量来创建可选的嵌套

Question

我有一个自行开发的CSS框架，有时必须包含在已有其他HTML / CSS的页面上。为了避免CSS冲突，我想在所有内容之前放置一个父ID选择器，以便像这样生成CSS：#MyFramework .thing-one { /* styles */ }。但我希望这是可选的，并通过varialbe设置。所以我想出了以下内容，但它不起作用，但也没有产生任何Sass错误。有没有正确的方法来做到这一点？

$framework-wrap: true;

@if $framework-wrap {
    #MyFramework {
}
        @import 'component-one';
        @import 'component-two';
        @import 'component-three';

@if $framework-wrap {
    }
}