SCSS @import with & to children to class

Question

I know you can do an import inside a class like this:

.my-class
{
    @import "another-file.scss";
}

Such that a class .foo in another-file.scss will compile to .my-class .foo in the output.

What I want to do is import a file such that all the rules in the file get a certain class added to them, like this:

.my-class
{
    &@import "another-file.scss";
}

Such that .foo in another-file.scss will compile to .my-class.foo in the output.

I'm building a set of components that all share a class because they are all part of the same "kit", and I want them all to share a class that denotes them as such, but I don't want to have them all in the same file under one giant nest.

Is this possible?

Thanks!

Answer 1

To accomplish this, you just need to preface the selectors in the file you are importing with &.

For example, if you were to import the following file, it would create rules for .my-class.header, my-class.header.cool and my-class.footer:

&.header {
    color: blue;
    &.cool {
        font-size: 20px;
    }
}

&.footer {
    color: blue;
}