Skip to content

Instantly share code, notes, and snippets.

@buttjer
Last active December 11, 2015 18:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save buttjer/4643167 to your computer and use it in GitHub Desktop.
Save buttjer/4643167 to your computer and use it in GitHub Desktop.
Simple universal Vendor SASS Mixin. Example: @include vendor(-prefix- transition, -prefix- transform 0.2s ease-in-out );
@mixin vendor($name, $args...) {
$vendors: -webkit-, -ms-, -moz-, -o-;
$nextWithVendor: false;
$first: true;
$cleanValues: null;
$cleanName: $name;
@if nth( $name, 1 ) == -prefix- {
$cleanName: nth( $name, 2 );
}
@each $vendor in $vendors {
$values: null;
@each $arg in $args {
@if nth( $arg, 1 ) == -prefix- {
$subValues: null;
@each $subValue in $arg {
@if $subValue != -prefix- {
$subValues: append( $subValues, $subValue );
}
}
$values: append( $values, $vendor + $subValues, comma );
@if $first {
$cleanValues: append( $cleanValues, $subValues, comma );
}
}
@else {
$values: append( $values, $arg, comma );
@if $first {
$cleanValues: append( $cleanValues, $arg, comma );
}
}
}
$first: false;
@if $cleanName != $name {
#{$vendor + $cleanName}: $values;
}
@else {
#{$cleanName}: $values;
}
}
#{$cleanName}: $cleanValues;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment