Foundation SASS Mixins

_mixins.scss

//
// Grid Columns
//
// A mixin to help make Foundation's grid-column mixin easier 
// to use when specifying multiple media quries/screen sizes
 
@mixin grid-columns(
    // Mobile First Media Queries
        $small-up-screens: 12,
        //changed default to 12, makes sense - IE
       $medium-up-screens: false,
        $large-up-screens: false,
       $xlarge-up-screens: false,
      $xxlarge-up-screens: false,
  // Specific Range Media Queries
      $small-only-screens: false,
     $medium-only-screens: false,
      $large-only-screens: false,
     $xlarge-only-screens: false,
    $xxlarge-only-screens: false ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-screens {
    @include grid-column($small-up-screens);
  }
  
  // Medium and up screens
  @if $medium-up-screens {
    @media #{$medium-up} {
      @include grid-column($medium-up-screens);
    }
  }
 
  // Large and up screens
  @if $large-up-screens {
    @media #{$large-up} {
      @include grid-column($large-up-screens);
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-screens {
    @media #{$xlarge-up} {
      @include grid-column($xlarge-up-screens);
    }
  }
 
  // XXLarge and up screens
  @if $xxlarge-up-screens {
    @media #{$xxlarge-up} {
      @include grid-column($xxlarge-up-screens);
    }
  }
  
  //
  // Specific Range Media Queries
  //
 
  // Small only screens  
  @if $small-only-screens {
    @media #{$small-only} {
      @include grid-column($small-only-screens);
    }
  }
  
  // Medium only screens
  @if $medium-only-screens {
    @media #{$medium-only} {
      @include grid-column($medium-only-screens);
    }
  }
 
  // Large only screens
  @if $large-only-screens {
    @media #{$large-only} {
      @include grid-column($large-only-screens);
    }
  }
  
  // XLarge only screens
  @if $xlarge-only-screens {
    @media #{$xlarge-only} {
      @include grid-column($xlarge-only-screens);
    }
  }
 
  // XXLarge only screens
  @if $xxlarge-only-screens {
    @media #{$xxlarge-only} {
      @include grid-column($xxlarge-only-screens);
    }
  }
}

// For setting offet when columns has already been set https://gist.github.com/webdevian/e70e00951b8b5ad0faef

@mixin grid-offset(
    // Mobile First Media Queries
        $small-up-screens: false,
       $medium-up-screens: false,
        $large-up-screens: false,
       $xlarge-up-screens: false,
      $xxlarge-up-screens: false,
  // Specific Range Media Queries
      $small-only-screens: false,
     $medium-only-screens: false,
      $large-only-screens: false,
     $xlarge-only-screens: false,
    $xxlarge-only-screens: false ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-screens {
    margin-#{$default-float}: grid-calc($small-up-screens, $total-columns) !important; 
  }
  
  // Medium and up screens
  @if $medium-up-screens {
    @media #{$medium-up} {
      margin-#{$default-float}: grid-calc($medium-up-screens, $total-columns) !important;
    }
  }
 
  // Large and up screens
  @if $large-up-screens {
    @media #{$large-up} {
      margin-#{$default-float}: grid-calc($large-up-screens, $total-columns) !important;
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-screens {
    @media #{$xlarge-up} {
      margin-#{$default-float}: grid-calc($xlarge-up-screens, $total-columns) !important;
    }
  }
 
  // XXLarge and up screens
  @if $xxlarge-up-screens {
    @media #{$xxlarge-up} {
      margin-#{$default-float}: grid-calc($xxlarge-up-screens, $total-columns) !important;
    }
  }
  
  //
  // Specific Range Media Queries
  //
 
  // Small only screens  
  @if $small-only-screens {
    @media #{$small-only} {
      margin-#{$default-float}: grid-calc($small-only-screens, $total-columns) !important;
    }
  }
  
  // Medium only screens
  @if $medium-only-screens {
    @media #{$medium-only} {
      margin-#{$default-float}: grid-calc($medium-only-screens, $total-columns) !important;
    }
  }
 
  // Large only screens
  @if $large-only-screens {
    @media #{$large-only} {
      margin-#{$default-float}: grid-calc($large-only-screens, $total-columns) !important;
    }
  }
  
  // XLarge only screens
  @if $xlarge-only-screens {
    @media #{$xlarge-only} {
      margin-#{$default-float}: grid-calc($xlarge-only-screens, $total-columns) !important;
    }
  }
 
  // XXLarge only screens
  @if $xxlarge-only-screens {
    @media #{$xxlarge-only} {
      margin-#{$default-float}: grid-calc($xxlarge-only-screens, $total-columns) !important;
    }
  }
}

// For setting both columns and offset in the same mixin - https://gist.github.com/webdevian/354096545435c6ed4c00
 
@mixin grid-offsets(
    // Mobile First Media Queries
        $small-up-columns: false,
        $small-up-offset: 0,
       $medium-up-columns: false,
       $medium-up-offset: 0,
        $large-up-columns: false,
        $large-up-offset: 0,
       $xlarge-up-columns: false,
       $xlarge-up-offset: 0
        ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-columns {
    @include grid-column($columns:$small-up-columns,$offset:$small-up-offset);
  }
  
  // Medium and up screens
  @if $medium-up-columns {
    @media #{$medium-up} {
      @include grid-column($columns:$medium-up-columns,$offset:$medium-up-offset);
    }
  }
 
  // Large and up screens
  @if $large-up-columns {
    @media #{$large-up} {
      @include grid-column($columns:$large-up-columns,$offset:$large-up-offset);
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-columns {
    @media #{$xlarge-up} {
      @include grid-column($columns:$xlarge-up-columns,$offset:$xlarge-up-offset);
    }
  }
 
}

@mixin rprop($prop,$phone:"", $tablet:"", $desktop:null){
	#{$prop}: $phone;
	@media #{$medium-up}{#{$prop}: $tablet;}



	// Edited to make desktop inherit medium if null - IE
	@if nullCheck($desktop) != null {

   	 @media #{$large-up}{#{$prop}: $desktop;}

   } @else {
        @media #{$large-up}{#{$prop}: $tablet;}
   }

}

@mixin rpropX($prop,$small-value,$medium-value,$large-value,$xlarge-value,$xxlarge-value){
	@if nullCheck($small-value) != null { #{$prop}: $small-value; }
	@if nullCheck($medium-value) != null { @media #{$medium-up} {#{$prop}: $medium-value;}}
	@if nullCheck($large-value) != null { @media #{$large-up} {#{$prop}: $large-value;}}
	@if nullCheck($xlarge-value) != null { @media #{$xlarge-up} {#{$prop}: $xlarge-value;}}
	@if nullCheck($xxlarge-value) != null { @media #{$xxlarge-up} {#{$prop}: $xxlarge-value;}}
}

@mixin smallprop($prop,$value:""){
	@media #{$small-only} {#{$prop}: $value;}
}
@mixin mediumprop($prop,$value:""){
	@media #{$medium-only} {#{$prop}: $value;}
}
@mixin largeprop($prop,$value:""){
	@media #{$large-only} {#{$prop}: $value;}
}
@mixin xlargeprop($prop,$value:""){
	@media #{$xlarge-only} {#{$prop}: $value;}
}
@mixin xxlargeprop($prop,$value:""){
	@media #{$xxlarge-only} {#{$prop}: $value;}
}

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}