SCSS: mixin boilerplate

scss-mixins-boiler.scss

/* =========== Mixins ============== */
/* 
sjds 2017-11-10 Compiled from experiance &  
Borrowing heavily from those before
*/


/*
 need to add clamp
 responsive ratio
 placeholder
 hardware?
 */

/* -------- Clearfix polyfill Mixin ----------- */
/* -------------------------------------------- */ 
/*	Usage:
	 *{ @include set-clearfix; } */

/*	Output:
	 	*:after {
		   content: "";
		   display: table;
		   clear: both;
	 	} 
*/

@mixin set-clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/* --------- box-sizing Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-ox-sizing(border-box);
	 } 	*/
/* Output:
	 * {
	   -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}					
*/	
@mixin set-box-sizing($box-mod) {
	-webkit-box-sizing: $box-mod; // Safari <= 5
	-moz-box-sizing: $box-mod; // Firefox <= 19
	box-sizing: $box-mod;
}

/* --------- set-fontface Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-fontface("MyFont", "path/to/MyFont", $style: normal, $weight: normal);
	 } 	*/
/* Output:
	 * {
		font-family: "MyFont";
		src: url("path/to/MyFont.eot");
		src: url("path/to/MyFont.eot?#iefix") format("embedded-opentype"), url("path/to/MyFont.woff") format("woff"), url("path/to/MyFont.ttf") format("truetype"), url("path/to/MyFont.svg#MyFont") format("svg");
		font-weight: normal;
		font-style: normal;
		}					
*/	
@mixin set-fontface($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

/* evaluate the tree font mixins we have across our projects
@mixin font-source-sans($size: false, $colour: false, $weight: false,  $lh: false) {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    @if $size { font-size: $size; }
    @if $colour { color: $colour; }
    @if $weight { font-weight: $weight; }
    @if $lh { line-height: $lh; }
}
*/



/* --------- Media query Mixin ------------- */
/* ------------------------------------------- */ 
// NOTE: requires definition of map $breakpoints in vars
/* Usage:
	 * {
	 	font-size: 12rem;
	   @include respondto(small){
			font-size: 14rem;
		}
	 } 	*/
/* Output:
	 * {
	   font-size: 12rem;
		}
	@media (min-width: 560px) {
		.element {
			font-size: 14rem;
		}
	}		
*/	
@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

//New version in progress
/*
@mixin respondto($size, $bracket:only) {
	@if $bracket == up {
		@if $size == small {
			@media only screen and (min-width: #map-get{($breakpoints, $xs-v-sm)}) {
				@content;
			}
		}
		@else $size == medium {
			@media only screen and (min-width: $sm-v-md) {
				@content;
			}
		}
	}
	@else $bracket == down {
    
   }
	@else $bracket == only {
    
   }
	@else $bracket == down {
    
   }
}
*/


/*
2do: evaluating
@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}
*/


/* --------- set-z Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	needs list -- 2DO update to map
	$z-indexes: (
	    "outdated-browser",
	    "modal",
	    "site-header",
	    "page-wrapper",
	    "site-footer"
	);
	 * {
	   z-index: set-z('site-header');
	 } 	*/
/* Output:
	 * {
	   
		}					
*/	
@function set-z($name) {
   @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}

/* --------- Rem translation Fn & Mixin ----------- */
/* ------------------------------------------------ */ 
// NOTE: requires definition of $font-size-base in vars
/* Usage: assuming $font-size-base: 12px;
	 * {
	   @include set-fontsize(24px);
	 } */
/* Output:
	 * {
	   font-size: 24px;
	   font-size: 2rem;
		}					
*/
@function calculateRem($size) {
	$remSize: $size / $font-size-base;
	@return $remSize * 1rem;
}

@mixin set-fontsize($size, $base: 14) {
 	font-size: $size;
	font-size: calculateRem($size);
}


/* --------- Absolute Pos Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-absolute($top: auto, $right: auto, $bottom: auto, $left: auto);
	 } 	*/
/* Output:
	 * {
		top: 10px;
		right: 10px;
		bottom: 5px;
		left: 15px;
		position: absolute;
	}					
*/	
@mixin  set-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
  	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
	position: absolute;
}


/* --------- set-position Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	   * {
		  @include relative;
		}
		.sub-menu {
		  @include absolute(top 100% left 0);
		}
		.sticky-bar {
		  @include fixed(top 0 left 0);
		}
*/
/* Output:
	 * {
	   
		}					
*/	
@mixin set-position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
      #{$o}: nth($args, $i + 1);
    }
  }
  position: $position;
}

@mixin absolute($args: '') {
  @include set-position(absolute, $args);
}

@mixin fixed($args: '') {
  @include set-position(fixed, $args);
}

@mixin relative($args: '') {
  @include set-position(relative, $args);
}


/* --------- set-center Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-center(inline-block);
	 } 	*/
/* Output:
	 * {
	   display: inline-block;
  		margin-left: auto;
  		margin-right: auto;
		}					
*/	
@mixin set-center($type:block) {
  display: $type;
  margin-left: auto;
  margin-right: auto;

}


/* --------- set-vertical-center Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-vertical-center();
	 } 	*/
/* Output:
	 * {
	   @include center-vertically;
		}					
*/	
@mixin set-vertical-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  @include prefix(transform, translate(-50%, -50%), 'webkit' 'ms');
}

/* --------- set-responsive-ratio Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-responsive-ratio(16,9);
	 } 	*/
/* Output:
	 * {
	   
		}					
*/	
@mixin set-responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}


/* --------- set-triangle Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-triangle();
	 } 	*/
/* Output:
	 * {
	   
		}					
*/	
@mixin set-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
   @include set-psudo-elem($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}


/* --------- set-psudo-ele Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-psudo-elem();
	 } 	*/
/* Output:
	div::after {
		@include pseudo;
		top: -1rem; left: -1rem;
		width: 1rem; height: 1rem;
	}				
*/	
@mixin set-psudo-elem($pos,$display,$content ) {
  content: $content;
  display: $display;
  position: $pos;
}

/* --------- set-placholder Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-placholder(color: $grey;);
	 } 	*/
/* Output:
	 * {
	   placeholder: $grey;
	   :-moz-placeholder: $grey;
	   ::-moz-placeholder: $grey;
	   :-ms-input-placeholder: $grey;
	   ::-webkit-input-placeholder: $grey;
		}					
*/	
@mixin set-placholder() {
  &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

/* --------- set-text-hidden Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-text-hidden();
	 } 	*/
/* Output:
	 * {
	   
		}					
*/	
@mixin set-hidden-text() {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

/* --------- Opacity Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-opacity(0.8);
	 } 	*/
/* Output:
	 * {
	   opacity: 0.8;
		filter: alpha(opacity=80);
		}					
*/	
@mixin set-opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity=$opacity-ie); //IE8
}


/* --------- Set-bg-gradient Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-bg-gradient(#07c, #06f, vertical);
	 } 	*/
/* Output:
	 * {
	   background: #07c;
	   background: -webkit-linear-gradient(top, #07c, #06f);
	   background: linear-gradient(to bottom, #07c, #06f);
		}					
*/	
@mixin set-bg-gradient($start-color, $end-color, $orientation:vertical) {
  background: $start-color;
  @if $orientation == 'vertical' {
    background: -webkit-linear-gradient(top, $start-color, $end-color);
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: -webkit-linear-gradient(left, $start-color, $end-color);
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}		


/* --------- Transition Mixin ------------- */
/* ------------------------------------------- */ 
/* Usage:
	 * {
	   @include set-transition( all, 0.6s, ease-in-out);
	 } 	*/
/* Output:
	 * {
	   -webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		}					
*/	
@mixin set-transition($transition-property, $transition-time, $method) {
	-webkit-transition: $transition-property $transition-time $method;
	-moz-transition: $transition-property $transition-time $method;
	-ms-transition: $transition-property $transition-time $method;
	-o-transition: $transition-property $transition-time $method;
	transition: $transition-property $transition-time $method;
}


/* -------- Retina image Handling ------------- */
/* -------------------------------------------- */ 
	//Usage:
	// .logo {
	// background-image: url("img/logo.png");
	//   @include set-retina("img/logo@2x.png", 100px, 21px);
	// }

 	//Output:
	//  @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
	//   .logo {
	//     /* Serving HQ image on Retina display */
	//     background-image: url("img/logo@2x.png");
	//     background-size: 100px 21px;
	//   }
	// }
@mixin set-retina($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* Serving 2x image on Retina display */
    background-image: url($image);
    background-size: $width $height;
  }
}