_mixins.scss

// Meida Queries
@mixin break($args...) {
	@if length($args) == 1 {
		@media (min-width: nth($args,  1)) {
			@content; 
		}
	} @else {
		@media (min-width: nth($args, 1)) and (max-width: nth($args, 2)) {
			@content; 
		}
	}
}
/// Mixin printing a linear-gradient
// reference Hugo Giraudel | sitepoint
@mixin linear-gradient($direction, $color-stops...) {
  // Direction has been omitted and happens to be a color-stop
  @if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}
// Border radius mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Box shadow 

@mixin box-shadow($x, $y, $br, $sr, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $x $y $br $sr $color;
    -moz-box-shadow:inset $x $y $br $sr $color;
    box-shadow:inset $x $y $br $sr $color;
  } @else {
    -webkit-box-shadow: $x $y $br $sr $color;
    -moz-box-shadow: $x $y $br $sr $color;
    box-shadow: $x $y $br $sr $color;
  }
}

// Placeholder Text
@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}