@each on nested lists assigns the wrong value the the variable in the loop.

[jbeales]

In this mixin, $transitions contains a comma-delimited list of CSS transitions, (each of which SASS treats a s a space-delimited list). However, the inner @each which should contain the entire CSS transition, only contains the first item of the transition.

Uncommenting the commented lines shows how things get weird.

@mixin transition( $prefix_properties, $transitions... ) {



    @if not str-index( inspect( $transitions ), ',') {
        $transitions: ( $transitions );
    //  list-length: length( $transitions );
    //  separator: list-separator( $transitions );
    //  transitions: inspect( $transitions );
    }

    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {

    //  transitions-var: inspect( $transitions );
    //  transitions-var-length: length( $transitions );
    //  transitions-var-separator: list-separator( $transitions );

        $prefixed: '';

        @each $transition in $transitions {

    //      transition-var: inspect( $transition );
    //      transition-var-separator: list-separator( $transition );
    //      in-loop-transitions-var-length: length( $transitions );

            @if $prefix_properties and '' != $prefix {
                $prefixed: #{$prefix}$transition,$transition;
            } @else {
                $prefixed: $transition;
            }


    //      $prefixed: join( $prefixed, ( $transition), comma );
        }

        #{$prefix}transition: $prefixed;
    }
}

Example:

// Input:
.my-element {
    @include transition( true, transform 0.25s linear );
}
// Output:
.my-element {
    -webkit-transition: -webkit- transform, transform;
    -moz-transition: -moz- transform, transform;
    -ms-transition: -ms- transform, transform;
    -o-transition: -o- transform, transform;
    transition: transform;
}

// Expected Output, (Produced by latest Ruby sass):
.my-element {
      -webkit-transition: -webkit-transform 0.25s linear, transform 0.25s linear;
      -moz-transition: -moz-transform 0.25s linear, transform 0.25s linear;
      -ms-transition: -ms-transform 0.25s linear, transform 0.25s linear;
      -o-transition: -o-transform 0.25s linear, transform 0.25s linear;
      transition: transform 0.25s linear;
}

The mixin works as expected in Ruby Sass, but fails with lib sass, (running through grunt and grunt-sass).

[ghost]

+1

[saper]

Looks related to #1729, maybe

[xzyfer]

Spec added sass/sass-spec#610

[xzyfer]

Pretty sure this is a duplicate of #1645

[mgreter]

This can be simplified to:

$qwe: transition;
$prefix: '-webkit-';
$prefixed: #{$prefix}$qwe,;
foo { bar: $prefixed; }

[sheinzle]

Ran across the same bug today when debugging Bourbon's @mixin transition. When passing a list within an arglist it is processed wrongly.

Here is a simplified version of the bug:

@mixin property-test($properties...) {
    @warn "#{type-of($properties)}"; // returns arglist
    @each $property in $properties {
        @warn "#{type-of($property)}"; // returns string instead of list
    }
}

.test {
    @include property-test(transform 0.6s, opacity 0.1s);
}

[mgreter]

@sheinzle that is a different bug and has already been fixed.

[jbeales]

Thanks @mgreter - I'm excited to see this in production so I can switch back to libsass, and leave slow Ruby sass behind :)