Saturday, April 25, 2015

Re: GSS migration: mixin definition for a transition with multiple transition-property

I had the same issue and played a bit more with it, and found some strange behavior.

To be able to specify transitions for 2 css properties I defined the following mixin:
@defmixin transition2(VALUE1, VALUE2) {
-webkit-transition: VALUE1, VALUE2;
-moz-transition: VALUE1, VALUE2;
-otransition: VALUE1, VALUE2;

But calling it as this:
 @mixin transition2(border-color 0.3s, box-shadow 0.3s);

Leads to this result:
transition: border-color 0s ease 0s, all 0.3s ease 0s, box-shadow 0s ease 0s, all 0.3s ease 0s;

Not really what I expected.

It works if I put both arguments in @def variable and specify that, like:
@def BLA1  border-color .3s;
@def BLA2  box-shadow .3s;
.BorderField select {
@mixin transition2(BLA1, BLA2);

Als mixing it: a literal and a @def variable results in the strange css output.
(A transition mixin with a single transition argument works fine)

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

No comments:

Post a Comment