Conditionally Conjoined Media Queries for Sass (just a proposal, and quite possibly a bad one)

readme.md

response to @kerns conjoined media queries proposal

original proposal link: [conjoined media queries proposal}(https://gist.github.com/3951840)

This proposal is unnecessary if you use Breakpoint. You can achieve the same result with less code as I show below. The simpler syntax also made it easier to spot ways to refactor the original example.

_breakpoint-version.scss

// path to local mixin
@import "../../stylesheets/breakpoint";
// @import "breakpoint";


/* 1. Using Breakpoint to do exactly what you propose */
$breakpoint-default-media: 'only screen';
$break-small: 320px;
$break-medium: 580px;
$break-large: 1234px;
$hi-rez: 2 device-pixel-ratio;

.break-small {
  @include breakpoint($break-small max-width) {
    content: "break small";
  }
}
.small-screen {
  @include breakpoint(($break-small + 1) ($break-medium - 1)) {
    content: "small-screen";
  }
}
.medium-screen {
  @include breakpoint(($break-medium + 1) ($break-large - 1)) {
    content: "medium-screen";
  }
}
.large-screen {
  @include breakpoint($break-large) {
    content: "large-screen";
  }
}
.retina {
  @include breakpoint($hi-rez) {
    content: "retina";
  }
}




/* 2. Perhaps a better refactoring */
$breakpoint-default-media: 'only screen';
$small-screen: 321px 580px;
$medium-screen: 581px 1233px;
$large-screen: 1234px;
$hi-rez: 2 device-pixel-ratio;

/* If we assume "mobile first" here, that would
 eliminate the first media query */
.small-screen {
  @include breakpoint($small-screen) {
    content: "small-screen";
  }
}
.medium-screen {
  @include breakpoint($medium-screen) {
    content: "medium-screen";
  }
}
.large-screen {
  @include breakpoint($large-screen) {
    content: "large-screen";
  }
}
.retina {
  @include breakpoint($hi-rez) {
    content: "retina";
  }
}


/* 3. combined queries. */
$small: 320px;
$medium: 580px;
$large: 1234px;
$extra-large: 1450px;


/* passing in two numeric values automatically creates a min/max width */
.min-max {
  @include breakpoint($medium $large) {
    content: "min/max width";
  }
}


/* you can change the feature with a string */
$small-height: 400px;
$medium-height: 800px;
.min-max-height {
  @include breakpoint($small-height $medium-height height) {
    content: "min/max height";
  }
}

/* you can chain these together with commas.
  I make new variables at this point for better readability */
$medium-width-height: $medium $large, $small-height $medium-height height;
.min-max-width-height {
  @include breakpoint($medium-width-height) {
    content: "min/max width and height";
  }
}

/* 4. !not */
/* We can also add in 'not' and 'only' by passing that in as a second argument.
 */
$hi-rez: 2 min-device-pixel-ratio;
.not-hi-rez {
  @include breakpoint($hi-rez, 'not screen') {
    content: "not hi-rez";
  }
}

generated-css.css

/* 1. Using Breakpoint to do exactly what you propose */
@media only screen and (max-width: 320px) {
  .break-small {
    content: "break small";
  }
}

@media only screen and (min-width: 321px) and (max-width: 579px) {
  .small-screen {
    content: "small-screen";
  }
}

@media only screen and (min-width: 581px) and (max-width: 1233px) {
  .medium-screen {
    content: "medium-screen";
  }
}

@media only screen and (min-width: 1234px) {
  .large-screen {
    content: "large-screen";
  }
}

@media only screen and (-webkit-device-pixel-ratio: 2), only screen and (-moz-device-pixel-ratio: 2) {
  .retina {
    content: "retina";
  }
}

/* 2. Perhaps a better refactoring */
/* If we assume "mobile first" here, that would
 eliminate the first media query */
@media only screen and (min-width: 321px) and (max-width: 580px) {
  .small-screen {
    content: "small-screen";
  }
}

@media only screen and (min-width: 581px) and (max-width: 1233px) {
  .medium-screen {
    content: "medium-screen";
  }
}

@media only screen and (min-width: 1234px) {
  .large-screen {
    content: "large-screen";
  }
}

@media only screen and (-webkit-device-pixel-ratio: 2), only screen and (-moz-device-pixel-ratio: 2) {
  .retina {
    content: "retina";
  }
}

/* 3. combined queries. */
/* passing in two numeric values automatically creates a min/max width */
@media only screen and (min-width: 580px) and (max-width: 1234px) {
  .min-max {
    content: "min/max width";
  }
}

/* you can change the feature with a string */
@media only screen and (min-height: 400px) and (max-height: 800px) {
  .min-max-height {
    content: "min/max height";
  }
}

/* you can chain these together with commas.
  I make new variables at this point for better readability */
@media only screen and (min-width: 580px) and (max-width: 1234px) and (min-height: 400px) and (max-height: 800px) {
  .min-max-width-height {
    content: "min/max width and height";
  }
}

/* 4. !not */
/* We can also add in 'not' and 'only' by passing that in as a second argument.
 */
@media not screen and (-webkit-min-device-pixel-ratio: 2), not screen and (min--moz-device-pixel-ratio: 2) {
  .not-hi-rez {
    content: "not hi-rez";
  }
}