Breakpoint Sass

breakpoint-rendered.html

<h1>Breakpoint Sass</h1>
<h2>Even better inline media queries</h2>

<div class="foo"></div>
<div class="baz"></div>
<div class="bar"></div>

<p>Please resize me.</p>

breakpoint.css

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700);
.foo {
  background: #00C176;
  content: 'No Media Queries';
}
@media (min-width: 43.75em) {
  .foo {
    background: #49007E;
    content: 'Basic Media Query - Small';
  }
}
@media (min-width: 56.25em) {
  .foo {
    background: #FF005B;
    content: 'Basic Media Query - Medium';
  }
}
@media (min-width: 68.75em) {
  .foo {
    background: #FF7D10;
    content: 'Basic Media Query - Large';
  }
}

.baz {
  background: #9A8194;
  content: 'No Media Queries';
}
@media (min-height: 6.25em) and (max-height: 18.75em) {
  .baz {
    background: #398A87;
    content: 'Custom Pair Media Query - Targeting Height';
  }
}
@media screen and (min-width: 20.0625em) and (max-width: 48em), handheld and (orientation: portrait) {
  .baz {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

.foo:before {
  content: 'No Media Query';
}
@media (min-width: 43.75em) {
  .foo:before {
    content: 'Basic Media Query - Small';
  }
}
@media (min-width: 56.25em) {
  .foo:before {
    content: 'Basic Media Query - Medium';
  }
}
@media (min-width: 68.75em) {
  .foo:before {
    content: 'Basic Media Query - Large';
  }
}

.baz:before {
  content: 'No Media Query';
}
@media (min-height: 6.25em) and (max-height: 18.75em) {
  .baz:before {
    content: 'Custom Pair Media Query - Targeting Height';
  }
}
@media screen and (min-width: 20.0625em) and (max-width: 48em), handheld and (orientation: portrait) {
  .baz:before {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

.bar {
  background: #4E395D;
  content: 'No Media Queries';
}
@media screen and (min-width: 50em) and (max-width: 75em), (min-height: 18.75em), (orientation: landscape) {
  .bar {
    content: "min-height:" false 300px false;
    content: "orientation:" false false landscape;
    content: "max-width: " 1200px false false;
  }
}

.bar:before {
  content: 'No Media Query';
}
@media screen and (min-width: 50em) and (max-width: 75em), (min-height: 18.75em), (orientation: landscape) {
  .bar:before {
    content: "I am basic. Check the compiled CSS for context.";
  }
}

/* Non-layout Styles */
.baz:before,
.foo:before,
.bar:before {
  color: #fff;
  display: block;
  font-size: 2rem;
  padding: 1em 0;
  text-align: center;
  width: 100%;
}

body {
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
}

body {
  background: #2d2d2d;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 3.6rem;
  font-weight: 700;
  margin: 2rem auto .5rem;
}

h2 {
  color: #f89e94;
  font-size: 1.6rem;
  font-weight: 100;
  margin: 0 auto 2rem;
}

p {
  color: #f89e94;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 2rem auto 0;
}

breakpoint.html

<h1>Breakpoint Sass</h1>
<h2>Even better inline media queries</h2>

<div class="foo"></div>
<div class="baz"></div>
<div class="bar"></div>

<p>Please resize me.</p>

breakpoint.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// ----

@import "compass";
@import "breakpoint";

$breakpoint-to-ems: true;

$small: 700px;
$medium: 900px;
$large: 1100px;

.foo {
  background: #00C176;
  content: 'No Media Queries';

  @include breakpoint($small) {
    background: #49007E;
    content: 'Basic Media Query - Small';
  }

  @include breakpoint($medium) {
    background: #FF005B;
    content: 'Basic Media Query - Medium';
  }

  @include breakpoint($large) {
    background: #FF7D10;
    content: 'Basic Media Query - Large';
  }
}

$custom-pair: (height 100px 300px);
$pair-portrait: screen 321px 768px, handheld (orientation portrait);

.baz {
  background: #9A8194;
  content: 'No Media Queries';

  @include breakpoint($custom-pair) {
    background: #398A87;
    content: 'Custom Pair Media Query - Targeting Height';
  }

  @include breakpoint($pair-portrait) {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

.foo:before {
  content: 'No Media Query';

  @include breakpoint($small) {
    content: 'Basic Media Query - Small';
  }

  @include breakpoint($medium) {
    content: 'Basic Media Query - Medium';
  }

  @include breakpoint($large) {
    content: 'Basic Media Query - Large';
  }
}

.baz:before {
  content: 'No Media Query';

  @include breakpoint($custom-pair) {
    content: 'Custom Pair Media Query - Targeting Height';
  }

  @include breakpoint($pair-portrait) {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

$basic: screen 800px 1200px, min-height 300px, orientation landscape;

.bar {
  background: #4E395D;
  content: 'No Media Queries';

  @include breakpoint($basic) {
    content: 'min-height:' breakpoint-get-context('min-height');
    content: 'orientation:' breakpoint-get-context('orientation');
    content: 'max-width: ' breakpoint-get-context('max-width');
  }
}

.bar:before {
  content: 'No Media Query';

  @include breakpoint($basic) {
    content: "I am basic. Check the compiled CSS for context.";
  }
}

/* Non-layout Styles */

.baz:before,
.foo:before,
.bar:before {
  color: #fff;
  display: block;
	font-size: 2rem;
	padding: 1em 0;
  text-align: center;
  width: 100%;
}

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700);

// Base text styles to be used for elements in this pen
%type-base {
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 100;
}

$color-coral: #F45D4C;
$color-green: #A1DBB2;
$color-yellow: #FACA66;

body {
  @extend %type-base;
  background: #2d2d2d;
  margin: 0 auto;
	text-align: center;
}

h1 {
	font-size: 3.6rem;
	font-weight: 700;
	margin: 2rem auto .5rem;
}

h2 {
	color: lighten($color-coral, 15%);
	font-size: 1.6rem;
	font-weight: 100;
	margin: 0 auto 2rem;
}

p {
	color: lighten($color-coral, 15%);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: .04em;
	margin: 2rem auto 0;
}