I have a home grown CSS framework that sometimes has to be included on pages that already have other HTML/CSS. To avoid CSS conflicts I'd like to put a parent ID selector in front of everything so that the CSS is generated like this: #MyFramework .thing-one { /* styles */ }
. But I'd like this to be optional and set via a varialbe. So I came up with the following, but it doesn't work but doesn't produce any Sass errors either. Is there a correct way to do this?
$framework-wrap: true;
@if $framework-wrap {
#MyFramework {
}
@import 'component-one';
@import 'component-two';
@import 'component-three';
@if $framework-wrap {
}
}