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.
@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")'));
- MIT licensed, so go nuts.
- Special thanks to @HugoGiraudel for his excellent
str-replace
function.
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.