Compass is a framework built on top of Sass and it provides mixins for all your css3 needs: http://compass-style.org/docs/reference/compass/css3/
<http://compass-style.org/docs/reference/compass/css3/>you just need to do the following: .fadeable { @include transition-property(opacity); @include transition-duration(0.5s); @include transition-timing-function(cubic-bezier(0.2, 0.4, 0.7, 0.8)); @include transition-delay(1s); } It's a little more verbose than your suggestion, but it doesn't have any semantic ambiguities (like how would I write a property that doesn't expand). Chris On Mon, Aug 30, 2010 at 3: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] <haml%[email protected]>. > For more options, visit this group at > http://groups.google.com/group/haml?hl=en. > > -- 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.
