SCSS Breakpoint Mixin

index.haml

%h2.page-title Something Interesting

SCSS-Breakpoint-Mixin.markdown

SCSS Breakpoint Mixin

A simple mixin to help with adding breakpoints to your SCSS.

A Pen by Erik Uunila on CodePen.

License.

style.scss

@import "compass/css3";
$breakpoint-desktop: 1080px;
$breakpoint-tablet: 800px;
$breakpoint-mobile: 600px;

// Breakpoint mixin
@mixin breakpoint($point, $first: 'max') {
	$bp: '';

	@if $point == desktop {
		$bp: $breakpoint-desktop;
	} @else if $point == tablet {
		$bp: $breakpoint-tablet;
	} @else {
		$bp: $breakpoint-mobile;
	}

	@if $first == min {
		$bp: $bp + 1;
	}

	@media screen and ($first + '-width:' + $bp) { @content ; }
}

.page-title {
  color: black;
  font-size: 16px;
  @include breakpoint(desktop, min) {
    font-size: 50px;
  }
  @include breakpoint(tablet) {
    color: red;
  }
  @include breakpoint(mobile) {
    color: HotPink;
  }
}