My Reusable Sass Mixins

global.scss

@mixin truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@mixin prefixify($style, $params) {
	-webkit-#{$style}: $params;
	-moz-#{$style}: $params;
	-ms-#{$style}: $params;
	-o-#{$style}: $params;
	#{$style}: $params;
}

@mixin unselectable {
	-webkit-touch-callout: none;
	@include prefixify(user-select, none);
}

@mixin border-top-radius($radius) {
	border-top-right-radius: $radius;
	border-top-left-radius: $radius;
}

@mixin border-bottom-radius($radius) {
	border-bottom-right-radius: $radius;
	border-bottom-left-radius: $radius;
}

@mixin border-left-radius($radius) {
	border-top-left-radius: $radius;
	border-bottom-left-radius: $radius;
}

@mixin border-right-radius($radius) {
	border-top-right-radius: $radius;
	border-bottom-right-radius: $radius;
}

@mixin linear-gradient($color1, $color2, $position1:0%, $position2:100%) {
	background-color: mix($color1, $color2);
	background-image: -webkit-gradient(linear, left top, left bottom, from($position1, $color1), to($position2, $color2));
	background-image: -webkit-linear-gradient(top, $color1 $position1, $color2 $position2);
	background-image:    -moz-linear-gradient(top, $color1 $position1, $color2 $position2);
	background-image:     -ms-linear-gradient(top, $color1 $position1, $color2 $position2);
	background-image:      -o-linear-gradient(top, $color1 $position1, $color2 $position2);
	background-image:         linear-gradient(top, $color1 $position1, $color2 $position2);
}