breakpoint-sass/tests/controls/05_min_max_feature.css

Really Simple Media Queries with Sass

/*
 * Set min/max of feature
 * if there are two numbers and a feature
 * $feature-min-max : height 300px 700px;
 * $min-max-feature : 300px 700px height;
 * $arbitrary-feature-min-max : lion 300px 700px;
 */
@media (min-height: 300px) and (max-height: 700px) {
  .min-max-feature {
    content: "$feature-min-max";
    content: "@media (min-height: 300px) and (max-height: 700px)";
  }
}
@media (min-height: 300px) and (max-height: 700px) {
  .min-max-feature {
    content: "$min-max-feature";
    content: "@media (min-height: 300px) and (max-height: 700px)";
  }
}
@media (min-lion: 300px) and (max-lion: 700px) {
  .min-max-feature {
    content: "$arbitrary-feature-min-max";
    content: "@media (min-lion: 300px) and (max-lion: 700px)";
  }
}
@media (min-height: 300px) and (max-height: 700px) {
  .min-max-feature {
    content: "$feature-min-max";
    content: "@media (min-height: 300px) and (max-height: 700px)";
  }
}
@media (min-height: 300px) and (max-height: 700px) {
  .min-max-feature {
    content: "$min-max-feature";
    content: "@media (min-height: 300px) and (max-height: 700px)";
  }
}
@media (min-lion: 300px) and (max-lion: 700px) {
  .min-max-feature {
    content: "$arbitrary-feature-min-max";
    content: "@media (min-lion: 300px) and (max-lion: 700px)";
  }
}

/* @include breakpoint-set('to ems', true); */
@media (min-height: 18.75em) and (max-height: 43.75em) {
  .min-max-feature-to-ems {
    content: "$feature-min-max";
    content: "@media (min-height: 18.75em) and (max-height: 43.75em)";
  }
}
@media (min-height: 18.75em) and (max-height: 43.75em) {
  .min-max-feature-to-ems {
    content: "$min-max-feature";
    content: "@media (min-height: 18.75em) and (max-height: 43.75em)";
  }
}
@media (min-lion: 18.75em) and (max-lion: 43.75em) {
  .min-max-feature-to-ems {
    content: "$arbitrary-feature-min-max";
    content: "@media (min-lion: 18.75em) and (max-lion: 43.75em)";
  }
}
@media (min-height: 18.75em) and (max-height: 43.75em) {
  .min-max-feature-to-ems {
    content: "$feature-min-max";
    content: "@media (min-height: 18.75em) and (max-height: 43.75em)";
  }
}
@media (min-height: 18.75em) and (max-height: 43.75em) {
  .min-max-feature-to-ems {
    content: "$min-max-feature";
    content: "@media (min-height: 18.75em) and (max-height: 43.75em)";
  }
}
@media (min-lion: 18.75em) and (max-lion: 43.75em) {
  .min-max-feature-to-ems {
    content: "$arbitrary-feature-min-max";
    content: "@media (min-lion: 18.75em) and (max-lion: 43.75em)";
  }
}