Using Susy, is there a way to include a piece of CSS inside breakpoint?

Question

Succinctly, By using Susy's at-breakpoint responsive mixin, is there a way or function to include an external CSS file in the body of the breakpoint call?

Something like this:

.page {
  border: 1px dashed #000;
  height: 650px;

  @include container;

  .content {
    color: red;
    text-align: center;
    border: 1px dashed red;
    height: 400px;

    @include span-columns(4 omega, 6);

    .main {
      color: green;
      border: 1px dashed green;
      text-align: center;
      @include span-columns(1, 2);
    }

    .secondary {
      color: blue;
      border: 1px dashed blue;
      @include span-columns(2, 3);
    }
  }

  @include at-breakpoint(800px 8 250px) {
    @include container; 

    .content {
      @include span-columns(1, 1);
    }

    //IMPORT or INCLUDE CSS FILE HERE somehow... 

  } //end of breakpoint

}

I was hoping it was possible, because that'd be a whole lot cleaner than writing all the CSS rules I wish to be applied right there inline. Let me know if it's possible or what's the best practice in this case.

Thank you!

Answer 1

Sure. This isn't really a question about Susy, so much as a question about Sass. The same answers are true for working in the context of any wrapping mixin.

You can only import files at the root level (for now, at least) — but that's not your only option. I've seen people write all their site styles inside mixins, and then simply include those mixins as needed:

@mixin medium-layout {
  // your medium css
}

.page {
  @include at-breakpoint($medium) {
    @include medium-layout;
  }
}

You can use as many mixins as you like, call them whatever you want, and put them in other files (as long as you @include those files before calling the mixins).

I use a different approach. Rather than nesting everything under a .page selector, with big groups for each breakpoint, I break things up into modules, and keep the breakpoint styles attached to each module as needed.

// _main.scss
.main {
  color: green;
  @include at-breakpoint($medium) { /* changes to main */ }
}

// _secondary.scss
.secondary {
  color: blue;
  @include at-breakpoint($medium) { /* changes to secondary */ }
}

From a mobile-first perspective, where breakpoint styles may need to override or build on existing styles, this keeps all the related code in one place.