SASS simplify a mixin with prefixes

sass

Solution

Transition isn't the only property that needs prefixes. As vendors add support, you can stop including the prefixes. If you abstract each part of your mixin, your code will be more maintainable in the long run.

$default-prefixes: webkit moz ms o;

@mixin build-prefix-values($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
} 

@mixin transition($property: all, $delay: 1s, $timing: linear) {
    $value: $property $delay $timing;
    // use default prefixes
    @include build-prefix-values('transition', $value);
}

// using defaults of 'all' '1s' and 'linear'
p {
    @include transition();
}

// using custom values
.fast {
    @include transition('height', '.1s', 'ease', '0');
}

Now let's say you want to write a @mixin for `border-radius` where `webkit` is the only prefix you need.

@mixin border-radius($radius) {
    $prefixes: webkit;
    @include build-prefix-values('border-radius', $radius, $prefixes);
}

Problem

Is there a cleaner way to do this? ``` @each $prefix in webkit moz ms o { -#{$prefix}-transition: all 1s linear; } transition: all 1s linear; ``` I hate redundancy and I would prefer if I could do it even simplier EDIT: Just to be clear. Im not looking for a method to implement transitions, what I want is a simplier code. In the example I give you see that I write 2 times the sale property. I would like to optimize this. Here an example of what I would be looking for (but this is NOT valid SCSS) ``` @each $prefix in "-webkit-", "-moz-", "-ms-", "-o-", "" { #{$prefix}transition: all 1s linear; } ```

Original source