You could write this as a mixin instead, so then you'd only have to
write it all out once and then just use the mixin. This would also get
round using the unsemantic class name 'fadeable'.
eg
@mixin fadeable {
/* Apple Safari and Google Chrome */
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
... etc etc ...
}
Then when you need this just write:
.tabs {
@include fadeable;
}
You could even go one step further and use arguments to have more
control of the duration of the fade:
@mixin fadeable($duration: 5s){
/* Apple Safari and Google Chrome */
-webkit-transition-property: opacity;
-webkit-transition-duration: $duration;
... etc etc ...
}
There's a possibility you could maybe use sasScript to create some
sort of loop that will write out all the vendor prefixes out for you,
but I'm not sure about that.
Hope that helps,
DAZ
On Aug 30, 11:22 am, David Foley <[email protected]> wrote:
> Just discovered SASS- looks great- addresses many of the issues I've
> always felt hampered CSS and looking forward to trying it out. For the
> icing on the cake, however, I'm wondering if SASS could take care of
> rewriting vendor specific CSS3 prefixes for me, so rather than
> manually writing something awful like
>
> .fadeable
> {
> /* Apple Safari and Google Chrome */
> -webkit-transition-property: opacity;
> -webkit-transition-duration: 0.5s;
> -webkit-transition-function: cubic-bezier(0.2, 0.4,
> 0.7, 0.8);
> -webkit-transition-delay: 1s;
> /* Mozilla Firefox */
> -moz-transition-property: opacity;
> -moz-transition-duration: 0.5s;
> -moz-transition-function: cubic-bezier(0.2, 0.4, 0.7,
> 0.8);
> -moz-transition-delay: 1s;
> /* Opera */
> -o-transition-property: opacity;
> -o-transition-duration: 0.5s;
> -o-transition-function: cubic-bezier(0.2, 0.4, 0.7,
> 0.8);
> -o-transition-delay: 1s;
> /* Internet Explorer (I'm guessing) */
> -ms-transition-property: opacity;
> -ms-transition-duration: 0.5s;
> -ms-transition-function: cubic-bezier(0.2, 0.4, 0.7,
> 0.8);
> -ms-transition-delay: 1s;
> /* standard */
> transition-property: opacity;
> transition-duration: 0.5s;
> transition-function: cubic-bezier(0.2, 0.4, 0.7,
> 0.8);
> transition-delay:
> 1s;
> }
>
> I could just write
>
> .fadeable
> {
> transition-property: opacity;
> transition-duration: 0.5s;
> transition-function: cubic-bezier(0.2, 0.4, 0.7,
> 0.8);
> transition-delay:
> 1s;
> }
>
> and have SASS take care of the vendor prefixes for me? This would be a
> great feature, don't you think?
>
> (Apologies if this is posted twice, encountered an error while sending
> the first)
--
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/haml?hl=en.
