The Best SASS mixing

_base_mixin.scss

///
/// Generates `opacity` output for a given element and adds a filter for old IE.
///
/// @author bartveneman
///
/// @link http://caniuse.com/css-opacity caniuse
/// @link http://www.w3.org/TR/css3-color/#transparency spec
///
/// @param {Number} $value [0]
///
/// @output
/// ```css
///   opacity: <value>;
///    filter: alpha(opacity=<value * 100>);
/// ```
///
/// @example
///   .selector {
///     @include x-opacity(0.3);
///   }
///
@mixin x-opacity ($value: 0) {
	$value-percentage: $value * 100;

	opacity: $value;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$value-percentage})";
	filter: alpha(opacity=#{$value-percentage});
}



///
/// Generates cross-browser-compatible `border-radius` for a given element.
///
/// @author drublic
///
/// @link http://caniuse.com/border-radius caniuse
/// @link http://www.w3.org/TR/css3-background/#corners spec
///
/// @param {List} $values
///
/// @output
/// ```css
///   -webkit-border-radius: <values>;
///           border-radius: <values>;
/// ```
///
/// @example
///   .selector {
///     @include x-border-radius(20px 10px);
///   }
///
@mixin x-border-radius ($values) {
	-webkit-border-radius: $values; // iOS Safari 3.2, Android 2.1
	        border-radius: $values;
}


///
/// Generates cross-browser-compatible `transition` output for a given element.
///
/// @author drublic
///
/// @link http://caniuse.com/css-transitions caniuse
/// @link http://www.w3.org/TR/css3-transitions spec
///
/// @param {Arglist} $values
///
/// @output
/// ```css
///   -webkit-transition: <values>;
///           transition: <values>;
/// ```
///
/// @example
///   .selector {
///     @include x-transition(background 0.3s ease-in);
///   }
///
@mixin x-transition ($values...) {
	-webkit-transition: $values;
	        transition: $values;
}

/* This can be customised depending	on the amount of columns you want 
	@include x-list-columns(2);

	url: https://codepen.io/rachel_web/pen/rVPmyj
*/
@mixin x-list-columns($col-amount, $col-margin: 15px) {
	list-style: none;
	float: left;
	
	width: 100 / $col-amount  + '%'; /* Fallback */
	width: -o-calc((100% - (#{$col-margin} * (#{$col-amount} - 1))) / #{$col-amount});
	width: calc((100% - (#{$col-margin} * (#{$col-amount} - 1))) / #{$col-amount});

	&:not(:nth-of-type(#{$col-amount}n)) {
		margin-right: $col-margin;
	}
}

// https://www.internetrix.com.au/blog/10-sass-scss-mixins-you-will-use-every-day/
// Transitions
// @include transition(all 0.2s ease-out);
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
	-webkit-transition: $what $time $how;
	-moz-transition:    $what $time $how;
	-ms-transition:     $what $time $how;
	-o-transition:      $what $time $how;
	transition:         $what $time $how;
}

// Border Radius
// @include border-radius(1em);
@mixin border-radius($top-left:10px, $top-right:null, $bottom-right:null, $bottom-left:null){
	-webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
		-moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
		-ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
			border-radius: $top-left $top-right $bottom-right $bottom-left;  
}

// Text Shadow
// @include text-shadow(2px,2px,2px,rgba(0,0,0,.25));
@mixin text-shadow($x1:2px, $y1:2px, $blur1:5px, $color1:black, $x2:null, $y2:null, $blur2:null, $color2:null){
	@if ($x2) {
		text-shadow: $x1 $y1 $blur1 $color1, $x2 $y2 $blur2 $color2; 
	}
	@else {
		text-shadow: $x1 $y1 $blur1 $color1;
	}
}

// Cross browser opacity
// @include opacity(0.8);
// http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}