SASS and media query aggregation

Question

Using Sass, I have the following mixin:

@mixin ss($property, $value, $value-smallscreen) {
  #{$property}: $value;
  @media screen and (max-height: $smallscreen-maxheight) {
    #{$property}: $value-smallscreen;
  }
}

.Header
{
  @include ss('height', $RowHeight, $RowHeight-smallscreen);
  @include ss('font-size', $HeaderFontsize, $HeaderFontsize-smallscreen);
}

The ‘problem’ that I have is that this generates two @media statements. That is, it generates the following CSS:

.Header {
  height: 41px;
  font-size: 11pt; }
  @media screen and (max-height: 768px) {
    .Header {
      height: 35px; } }
  @media screen and (max-height: 768px) {
    .Header {
      font-size: 9pt; } }

What I want to know, is there any way to both:

Keep the definitions together, to ensure that the styles are added for both big and small screens, and
Only have one '@media' section.

possible duplicate of [Merging media queries, using SASS and Breakpoint (Respond-To)](http://stackoverflow.com/questions/17478693/merging-media-queries-using-sass-and-breakpoint-respond-to) — cimmanon, Dec 07 '14 at 23:06
@cimmanon I don't believe that this is a duplicate, since I know that there are multiple media queries. The answer there, is "don't create multiple". My question is "Is there a way to not create multiple, and not duplicate the definitions in SASS". — Paul Wagland, Dec 07 '14 at 23:45

score 1 · Accepted Answer · answered Dec 08 '14 at 14:19

1

One of my current projects requires this approach to the SASS structure, and my solution has been to watch the CSS output using a CSS post-processor like Pleeease to watch the CSS files as SASS/Compass outputs them.

This allows live media query packing among other optimization.

answered Dec 08 '14 at 14:19

BurpmanJunior

988
5
13

Thanks. I will investigate this kind of post processing phase. I was hoping to avoid it, but maybe it is the best solution. – Paul Wagland Dec 08 '14 at 20:24

SASS and media query aggregation

1 Answers1