Maybe this is obvious to everybody else, but I just realized (as I was falling asleep last night) that you could nest a Sass @import inside of a rule of a parent file. So it's possible to do something like this.

  // main.scss

.pony {
    @import 'sub';
    font-size: 100px;
}

  // _sub.scss

.chow {
    color: tomato;
}

And then the output CSS would look like this:

  .pony { font-size: 100px; }
.pony .chow { color: tomato; }

When building out SCSS files into modules, I've been explicitly setting a base parent selector to put the module rules where they belonged. I don't know why I wasn't just nesting these imports. That will make for much cleaner code, but it will be important to specify exactly where those partials should be imported. Doing this will also serve to keep the table-of-contents-style main SCSS file a little cleaner as well, since it will only have the very top-level components of an app and not every little menu and widget that has its own style rules.


20,155 10 30