Sass vendor mixin

README.md

Sass vendor mixin

Quick little mixin to automatically vendorize properties/values that might need to be vendorized (listed in $vendor-properties and $vendor-values). Originally written for http://html5up.net/spectral.

Examples

@include vendor('transform', 'rotate(-45deg)');
@include vendor('transition', ('transform 1s ease', 'opacity 0.5s ease'));
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../images/banner.jpg")'));

License/Credits

• MIT licensed, so go nuts.
• Special thanks to @HugoGiraudel for his excellent str-replace function.

_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?
		@elseif $expandValue {
		    @each $vendor in $vendor-prefixes {
		        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
		    }
		}

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

}

Can you help me understand what this code does please? I am very new to SASS.

This code defines a set of Sass variables, functions, and mixins that can be used to generate CSS code that includes vendor prefixes for properties and values that require them.

The $vendor-prefixes variable contains a list of prefixes that should be used, including the prefixes for Mozilla, WebKit, and Microsoft browsers, as well as an empty string for unprefixed properties.

The $vendor-properties variable contains a list of CSS properties that should be vendor-prefixed. The $vendor-values variable contains a list of CSS values that should be vendor-prefixed.

The str-replace function is a recursive function that replaces a substring within a string. The function takes three arguments: the original string, the substring to search for, and the replacement substring. The function returns the updated string.

The str-replace-all function takes a list of strings, a substring to search for, and a replacement substring. It applies the str-replace function to each string in the list and returns the updated list of strings.

The vendor mixin is the main feature of this code. It takes two arguments: a CSS property and a value or list of values. The mixin determines whether the property or value should be expanded with vendor prefixes and then generates the appropriate CSS code. If the property should be expanded, the mixin loops through each prefix in $vendor-prefixes and generates a CSS rule for each prefix, using the str-replace-all function to replace any -prefix- placeholders in the value with the current prefix. If only the value should be expanded, the mixin loops through each prefix and generates a CSS rule with the prefixed value. If neither the property nor the value require prefixing, the mixin generates a normal CSS declaration.