Friday, April 24, 2015

Re: GSS mixin restricted ?

If you rewrite a bit your gss by defining conditionals inside the selector, you will be able to extract them in mixins:

@defmixin successSelect() {
@if is("browser.engine",  "webkit") {
-webkit-transform: translate(-40%, 0);
-webkit-transition: transform 1s, opacity 2s;
}
@elseif is("browser.engine",  "gecko") {
-moz-transform: translate(-40%, 0);
-moz-transition: transform 1s, opacity 2s;
}
@elseif is("browser.engine",  "trident") {
-ms-transform: translate(-40%, 0);
-ms-transition: transform 1s, opacity 2s;
}
@elseif is("browser.engine",  "presto") {
-o-transform: translate(-40%, 0);
-o-transition: transform 1s, opacity 2s;
}
@else {
transform: translate(-40%, 0);
transition: transform 1s, opacity 2s;
}
}

@defmixin successSelectOnOn() {
@if is("browser.engine",  "webkit") {
-webkit-transform: translate(0, 0);
}
@elseif is("browser.engine",  "gecko") {
-moz-transform: translate(0, 0);
}
@elseif is("browser.engine",  "presto") { 
-o-transform: translate(0, 0);
}
@elseif is("browser.engine",  "trident") {
-ms-transform: translate(0, 0);
}
@else {
transform: translate(0, 0);
}
}

.SuccessSelect {
@mixin successSelect();
}

.SuccessSelect.On-On { 
@mixin successSelectOnOn();
}


FYI, it's possible in a near future that GSS removes automatically the vendor prefix not associated with a permutation and so this kind of conditional will not be needed anymore.

On Friday, April 24, 2015 at 12:10:47 PM UTC+2, Ed wrote:
I don't like repeating myself, but I do with a certain slide-in effect that I use a lot for different css class selector.
Below the css snippet for the effect. 

How to use this in a kind of mixin method with the class name as parameter ?
Or is there some other way to not repeat myself too much..

I tried it as mixin but didn't work. I think it's because mixin can only insert style rules (in a class selector), and not complete style class snippets.

Any idea's ?




@if is("browser.engine",  "webkit") {
.SuccessSelect {
-webkit-transform: translate(-40%, 0);
-webkit-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-webkit-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "gecko") {
.SuccessSelect {
-moz-transform: translate(-40%, 0);
-moz-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-moz-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "trident") {
.SuccessSelect {
-ms-transform: translate(-40%, 0);
-ms-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-ms-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "presto") {
.SuccessSelect {
-o-transform: translate(-40%, 0);
-o-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-o-transform: translate(0, 0);
}
}
@else {
.SuccessSelect {
transform: translate(-40%, 0);
transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On{ 
transform: translate(0, 0);
}
}


--
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 google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment