Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

$media-direction: max;

// Mixin: flex-breakpoint 
// Flexible Breakpoint Mixin
// 'Mixin with Content Insert'
//
// @mixin     flex-breakpoint
// @param     $value {list} Value Min and Max or only Min/Max Width
// @param     $direction {value} max, min
// @usage:    +flex-breakpoint($value,$dir)   
@mixin breakpoint($values,$direction: $media-direction) {
  
  // When $values takes two values build a Media Query with min and max
  @if length($values) > 1 {
    
    // Move the Values in internal Variables
    $min: nth($values,1);
    $max: nth($values,2);
    
    // Check Units - when unitless use px as default
    @if unitless($max) {
      $max: $max + 0px;
    }
    
    @if unitless($min) {
      $min: $min + 0px
    }
    
    // Build the Media Query
    @media screen and (min-width: $min) and (max-width: $max) {
      @content;
    }
    
  } @else {
    // When $values takes only one value build a Media Query with one direction
    
    // Check Units - when unitless use px as default
    @if unitless($values) {
      $values: $values + 0px;
    }
    
    // Build the Media Query
    @media only screen and (#{$direction}-width: $values) {
      @content;
    }
  }
}

.myclass {
  @include breakpoint(400) {
    color: white;
  }
  @include breakpoint(300 600) {
    width: 100%;
  }
}


@include breakpoint(300em 200em) {
  .display__block {
    display: block;
  }
}

.gimme-more-width {
  @include breakpoint(1000,max) {
    width: 100%;
  }
}

SassMeister-output.css

@media only screen and (max-width: 400px) {
  .myclass {
    color: white; } }
@media screen and (min-width: 300px) and (max-width: 600px) {
  .myclass {
    width: 100%; } }

@media screen and (min-width: 300em) and (max-width: 200em) {
  .display__block {
    display: block; } }

@media only screen and (max-width: 1000px) {
  .gimme-more-width {
    width: 100%; } }