SCSS导入层次结构

Question

I want to structure my project CSS in a hierarchy like so:

app {
    interface1 {
        gadget1 {}
    }
}

And I want to split this into numerous smaller CSS files:

app.scss
_interface1.scss
_gadget1.scss

Can I import like this:

/* app.scss */
app {
    @import 'interface1'
    @import 'interface2'
}

/* _interface1.scss */
interface 1 {
    @import 'gadget1'
}

/* _gadget1.scss */
gadget1 {
    height: 1000px;
    width: 1000px;
    /* ...etc... */
}

Or what is the best way to achieve this end structure?

Answer 1

Answering my own question: Yes it is possible to do exactly that.

Downloaded SASS and tried it.