SASS code structure for media queries

Question

I'm using SASS to create a responsive site. At the moment, my code is structured into a number of partials:

Some default colours and sizes
Overall Layout
Partial for each element

As a result of this organisation I'm finding that I'm ending up with the media queries being declared numerous times through the resulting CSS - it just feels messy. As a result I've been working with a few ideas to keep the current structure, but end up with a simpler resulting code.

My idea goes something like this:

A variable contains a list of the partials to @import
A variable contains a list of the media query sizes (always using min-width, therefore this list is nothing more than a string of numbers)
Each partial (_footer.scss, _header.scss) would then contain a @mixin titles something like - content-footer, content-header, etc
Those @mixin's would take a single variable relating to the media-query and output the appropriate code for that condition.
style.scss would @import each partial from the list,
then cycle through each media-size and partial respectively, calling the function and media size.

The above process would result in something like this being effected...

@import 'footer';
@import 'header';
@include content-footer(0);
@include content-header(0);
@include content-footer(320);
@include content-header(320);
@include content-footer(640);
@include content-header(640);

etc..

My question is this - how do I call the dynamically titled @mixin? Something like content-#{$partial} seems like it should work, but doesn't.

I suppose if this doesn't work, then I could re-import the partial each time, but this seems overkill...

@import 'footer';
@include content(0);
@import 'header';
@include content(0);
@import 'footer';
@include content(320);
@import 'header';
@include content(320);
@import 'footer';
@include content(640);
@import 'header';
@include content(640);

Nils Kaspersson Nils Kaspersson · Accepted Answer · 2013-10-22T07:59:46

Personally I find comfort in declaring media queries at many places throughout the document. It feels object oriented and it's really easy to keep track of what's actually going on. I'm usually interested in editing one module in particular, not the entire layout, so it makes more sense to me.

I have a mixin that looks something like this:

$mq-small:   30em;
$mq-medium:  50em;
$mq-large:   70em;

@mixin mq($size) {
  @if      $size == small  { @media only screen and (min-width: $mq-small) { @content; } }
  @else if $size == medium { @media only screen and (min-width: $mq-medium) { @content; } }
  @else if $size == large  { @media only screen and (min-width: $mq-large) { @content; } }
}

Which allows me to write media queries like this:

.element {
  // generic rules

  @include mq(medium) {
    // size-specific rules
  }
}

Which creates this output:

.element {
  // generic rules
}

@media only screen and (min-width: 50em) {
  .element {
    // size-specific rules
  }
}

Then, when the project is ready to be deployed, I merge the media queries manually in the output CSS into one place to remove bloat.

It's not perfectly clean, but it's also not necessary and the workflow is awesome. Last I heard, this merging is supposed to happen automatically in future versions of SASS. Perhaps that's just a rumor, though, but it would be nice.

SASS code structure for media queries

1 Answers