SURVIVAL KIT - BREAKPOINT

breakpoint.sass

////////////////////////////
// SURVIVAL KIT - BREAKPOINT
// breakpoint($breakpoint, $media: 'screen')
////////////////////////////

$breakpoint-default-feature: min-width !default

// create $breakpoint variables like so
// assume $breakpoint-default-feature if only a number
$breakpoint1: 500px
$breakpoint2: 30em
// set min-width/max-width if both values are numbers
$breakpoint3: 500px 700px
// if one value is a string, assume a feature/value pair
$breakpoint4: min-width 700px
$breakpoint5: max-width 700px
// for multidimensional lists, assume each item is a feature value pair
$breakpoint6: max-width 700px, orientation portrait
// handle one-sided features (ie. monochrome)
$breakpoint7: max-width 700px, orientation portrait, monochrome
$breakpoint8: monochrome


@function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature)
  $new-string: ''
  @if $feature != false
    $new-string: #{$query-string}unquote("and (#{$feature}:  #{$new-value}) ")
  @else
    $new-string: #{$query-string}unquote("and (#{$new-value}) ")
  @return $new-string

=breakpoint($breakpoint, $media: 'screen')
  // initialize string
  $query-string: '#{$media} '
  @if type-of($breakpoint) == number
    // assume max-width if only a number
    $query-string: breakpoint-concatenate($query-string, $breakpoint)
  @if type-of($breakpoint) == string
    // handle one-sided features (ie. monochrome)
    $query-string: breakpoint-concatenate($query-string, $breakpoint, false)
  @else if type-of($breakpoint) == list
    @if (type-of(nth($breakpoint, 1)) == number) and (type-of(nth($breakpoint, 2)) == number)
      // set min/max if both values are numbers
      @if $modular-scale-loaded == true
        $breakpoint: sort-list($breakpoint)
      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), 'min-width')
      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), 'max-width')
    @else if (type-of(nth($breakpoint, 1)) == string)
      // if one value is a string, assume a feature/value pair
      $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), nth($breakpoint, 1))
    @else if (type-of(nth($breakpoint, 1)) == list)
      // for multidimensional lists, assume each item is a feature value pair
      @each $item in $breakpoint
        @if type-of($item) == list
          // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}:  #{nth($item, 2)}) ")
          $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1))
        @else
          // handle one-sided features (ie. monochrome)
          $query-string: breakpoint-concatenate($query-string, $item, false)
  // write out the media query
  @media #{$query-string}
    @content


.foo
  +breakpoint($breakpoint1)
    content: 'foo'
.bar
  +breakpoint($breakpoint2)
    content: 'bar'
.baz
  +breakpoint($breakpoint3)
    content: 'baz'
.omg
  +breakpoint($breakpoint4)
    content: 'omg'
.wtf
  +breakpoint($breakpoint5)
    content: 'wtf'
.bbq
  +breakpoint($breakpoint6)
    content: 'bbq'
.zztop
  +breakpoint($breakpoint7)
    content: 'zztop'
.elp
  +breakpoint($breakpoint1, print)
    content: 'elp'
.csny
  +breakpoint($breakpoint8)
    content: 'csny'
.rhcp
  +breakpoint(30em 40em)
    content: 'rhcp'

generated.css

@media screen and (min-width:  500px) {
  .foo {
    content: "foo";
  }
}

@media screen and (min-width:  30em) {
  .bar {
    content: "bar";
  }
}

@media screen and (min-width:  500px) and (max-width:  700px) {
  .baz {
    content: "baz";
  }
}

@media screen and (min-width:  700px) {
  .omg {
    content: "omg";
  }
}

@media screen and (max-width:  700px) {
  .wtf {
    content: "wtf";
  }
}

@media screen and (max-width:  700px) and (orientation:  portrait) {
  .bbq {
    content: "bbq";
  }
}

@media screen and (max-width:  700px) and (orientation:  portrait) and (monochrome) {
  .zztop {
    content: "zztop";
  }
}

@media print and (min-width:  500px) {
  .elp {
    content: "elp";
  }
}

@media screen and (monochrome) {
  .csny {
    content: "csny";
  }
}

@media screen and (min-width:  30em) and (max-width:  40em) {
  .rhcp {
    content: "rhcp";
  }
}