_vendor.scss

/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
	'-moz-',
	'-webkit-',
	'-ms-',
	''
);

/// Properties that should be vendorized.
/// @var {list}
$vendor-properties: (
	'align-content',
	'align-items',
	'align-self',
	'animation',
	'appearance',
	'box-sizing',
	'filter',
	'flex',
	'flex-basis',
	'flex-direction',
	'flex-flow',
	'flex-grow',
	'flex-shrink',
	'flex-wrap',
	'justify-content',
	'order',
	'pointer-events',
	'transform',
	'transition',
	'transition-delay'
);

/// Values that should be vendorized.
/// @var {list}
$vendor-values: (
	'flex',
	'linear-gradient',
	'radial-gradient',
	'transform'
);

/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {

	$index: str-index($string, $search);

	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}

	@return $string;

}

/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {

	@each $string in $strings {
		$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
	}

	@return $strings;

}

/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {

	// Determine if property should expand.
		$expandProperty: index($vendor-properties, $property);

	// Determine if value should expand (and if so, add '-prefix-' placeholder).
		$expandValue: false;

		@each $x in $value {
			@each $y in $vendor-values {
				@if $y == str-slice($x, 1, str-length($y)) {

					$value: set-nth($value, index($value, $x), '-prefix-' + $x);
					$expandValue: true;

				}
			}
		}

	// Expand property?
		@if $expandProperty {
		    @each $vendor in $vendor-prefixes {
		        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
		    }
		}

	// Expand just the value?
		@else if $expandValue {
		    @each $vendor in $vendor-prefixes {
		        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
		    }
		}

	// Neither? Treat them as a normal declaration.
		@else {
	        	#{$property}: #{$value};
		}

}